I have been asked to change the icon in the drop down list from the "V" to a custom image. Is this possible? If so, what would your recommend is the best way to do so?
Please see the attached image as an example. I've highlighted what we would like to change in a red box.
Thank you.
Please see the attached image as an example. I've highlighted what we would like to change in a red box.
Thank you.
1 Answer, 1 is accepted
0
Accepted
Hello,
As I can see you are using RadComboBox control, not RadDropDownList. The easiest way to change the icon is to use Lightweight RadComboBox and your custom font.
In the following example I used our default font and I applied another icon on the RadComboBox action button:
Hope this will be helpful.
Regards,
Aneliya Petkova
Telerik
As I can see you are using RadComboBox control, not RadDropDownList. The easiest way to change the icon is to use Lightweight RadComboBox and your custom font.
In the following example I used our default font and I applied another icon on the RadComboBox action button:
<head runat="server"> <title>ComboBox</title> <style> html .RadComboBox .rcbActionButton .rcbIconDown:before { content: "\E048"; } </style></head><body> <form id="form1" runat="server" method="post"> <h1>Combo</h1> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference> </Scripts> </telerik:RadScriptManager> <div> <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="300px" Skin="Office2007" RenderMode="Lightweight" AllowCustomText="true"> <Items> <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1RadComboBoxItem1" Value="RadComboBoxItem1" /> <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2RadComboBoxItem1" Value="RadComboBoxItem2" /> <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3RadComboBoxItem1" Value="RadComboBoxItem3" /> <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4RadComboBoxItem1" Value="RadComboBoxItem4" /> <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5RadComboBoxItem1" Value="RadComboBoxItem5" /> <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6RadComboBoxItem1" Value="RadComboBoxItem6" /> <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem7RadComboBoxItem1" Value="RadComboBoxItem7" /> </Items> </telerik:RadComboBox> </div> </form></body>Hope this will be helpful.
Regards,
Aneliya Petkova
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.