Change the image on the Dropdownlist

[Bryan Smouse]

Hello all,

I am looking for the css class that I can use to override the "v" icon that is shown to the right of a Kendo DropDownList.  If I can't replace the icon itself, I'll settle for changing the color of it. 

 

For what it's worth, here's my dropdownlist:

var facilityList = Html.Kendo().DropDownList()
.Name("facilityList")
.HtmlAttributes(new { style = "width: 200px;" })
.Items(items =>
{
foreach (var item in Model.Facilities.Values)
{
items.Add().Text(item.Name).Value(item.Id.ToString());
}
});

 

 

[Bryan Smouse]

I forgot to mention that I would also like to override the shadow style that shows on hover over the DropDownList. 

I have included an image to clarify (That is a Kendo UI dropdownlist, but with lots of css styling).

[Ivan Danchev]

Hello Bryan,

Here's a sample dojo, which demonstrates how the DropDownList arrow icon can be changed, by default the pseudo element's content property value is "\e006" and in the example the arrow is changed to a plus sign ("\e120"). The second CSS rule shows how the color of the icon can be customized. The first rule shows how the border and the background of the widget can be set for its hover state.

Regards,
Ivan Danchev
Telerik by Progress