New to Kendo UI for jQuery? Download free 30-day trial

Alternate Colors of DropDownList Items


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


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


Use the following CSS rules:

 #countries-list ul li:nth-of-type(odd) {
    background: lightblue;
<div id="example">
  <div class="demo-section k-content">
    <input id="products" style="width: 100%" />

    $(document).ready(function() {
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
          transport: {
            read: {
              dataType: "jsonp",
              url: "",
    #products-list ul li:nth-of-type(odd) {
      background: lightblue;

See Also

In this article