[Solved] How do I add a ComboBox custom icon?

[Jeff]

Hi - I'm looking to add a search icon to the right in my combo box (right before the dropdown arrow, similar to the look of the google toolbar).  I tried adding a css class like this...

.search-combo-box
{
    background-image: url('Images/Search-icon.png');
    background-repeat: no-repeat;
    background-position: right;
}

Then on my combo box, I set the class...

.HtmlAttributes( new { @class = "search-combo-box" } )

But the icon isn't showing up.   I'm assuming this is something simple I'm missing.  Has anyone done something similar before?

Thanks!

[Dimo]

Hi Jeff,

You should define your CSS selector like this:

.search-combo-box  .t-input
{
    /* ... */
}

This is because the custom CSS class is applied to the ComboBox wrapper, while the custom background image needs to be set for the textbox inside the wrapper. You cannot define a custom background image for the component's wrapper, because the native appearance will be spoiled.

Regards,
Dimo
the Telerik team

[Jeff]

Thanks Dimo!  That worked great...

.search-combo-box .t-input
{
    background-image: url('Images/Search-icon.png');
    background-repeat: no-repeat;
    background-position: right;
}