Cannot change the dropdownlist background color

2 posts, 0 answers
  1. Peter
    Peter avatar
    20 posts
    Member since:
    Sep 2018

    Posted 18 Jul 2019 Link to this post

    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?

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    894 posts

    Posted 19 Jul 2019 Link to this post

    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.
Back to Top