This is a migrated thread and some comments may be shown as answers.

Cannot change the dropdownlist background color

1 Answer 85 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 18 Jul 2019, 08:48 AM
I have telerik rad DropDownList, I want to change the background color of one item to yellow.
Here is the aspx, which I put the cssClass to  unknown css

<div class="col-md-3 customColumnPadding" id="uiColumnClasses" runat="server">
        <telerik:RadDropDownList ID="uiClasses" runat="server" Width="100%">
            <Items>
                <telerik:DropDownListItem runat="server" Text="<%$ Resources:Resource,Unknown %>" Value="22001" cssClass ="unknown"/>
                <telerik:DropDownListItem runat="server" Text="<%$ Resources:Resource,Business %>" Value="22002" />
                <telerik:DropDownListItem runat="server" Text="<%$ Resources:Resource,Economy %>" Value="22004" Selected="true" />
                <telerik:DropDownListItem runat="server" Text="<%$ Resources:Resource,First %>" Value="22003" />
                <telerik:DropDownListItem runat="server" Text="<%$ Resources:Resource,Premium_Economy %>" Value="22005" />
            </Items>
        </telerik:RadDropDownList>
    </div>


And here is the content of css file:
```
.RadDropDownList_MetroTouch .rddlFocused
{
    border-color: #486190 !important;
    background-color: #486190 !important;
}

.unknown
{
    border-color: #FFFF00 !important;
    background-color: #FFFF00 !important;
}
```

However, I found that in inspector of the browser, the css Class ```unknown``` is not exist. And the item color is not changed. Here is the content get from inspector. You can see the value "Unknown" is not have the css class ```unknown```
```
<div id="ctl00_ContentPlaceHolder1_UsageControl0_UsageControl58_uiClasses" class="RadDropDownList RadDropDownList_MetroTouch" style="width:100%;" tabindex="0">
<span class="rddlInner rddlFocused">
<span class="rddlFakeInput">Unknown</span>
<span class="rddlIcon">
<!-- &nbsp; -->
</span></span>
<input id="ctl00_ContentPlaceHolder1_UsageControl0_UsageControl58_uiClasses_ClientState" name="ctl00_ContentPlaceHolder1_UsageControl0_UsageControl58_uiClasses_ClientState" type="hidden" autocomplete="off">
</div>
```

What is the problem? How can I make the item change to yellow color where the value is Unknown?

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 19 Jul 2019, 12:49 PM

Hello Peter,

You can check the following KB article that shows how to change the color of the items and also the selected item in the DropDownList itself: 

Regards, Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
Peter
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or