Alternate Colors of DropDownList Items

Environment

Product	Progress® Kendo UI® DropDownList for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I implement alternating colors in the items of a Kendo UI DropDownList?

Solution

Use the following CSS rules:

 #countries-list ul li:nth-of-type(odd) {
    background: lightblue;
 }

<div id="example">
  <div class="demo-section k-content">
    <h4>Products</h4>
    <input id="products" style="width: 100%" />
  </div>

  <script>
    $(document).ready(function() {
      $("#products").kendoDropDownList({
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
          transport: {
            read: {
              dataType: "jsonp",
              url: "https://demos.telerik.com/kendo-ui/service/Products",
            }
          }
        }
      });
    });
  </script>
  <style>
    #products-list ul li:nth-of-type(odd) {
      background: lightblue;
    }
  </style>
</div>

See Also

• DropDownList Overview