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

Change CheckBox Color

Environment

Product CheckBox for Progress® Kendo UI®
Product Version 2020.3.1021

Description

How can I change the colors of a CheckBox?

Solution

Set a different color and background color by using CSS.

/*empty checkbox*/
.k-checkbox {
    background: green;
}

/*checked checkbox*/
.k-checkbox:checked {
    background: red;
    color: white;
}

The following example demonstrates how to render a list of CheckBoxes with a new color scheme.

    <style>
      /*Empty checkbox*/
      .k-checkbox {
        background: green;
      }

      /*Checked checkbox*/
      .k-checkbox:checked {
        background: red;
        color: white;
      }


      /*Additional Styling For Example*/
      .fieldlist {
        margin: 0 0 -1em;
        padding: 0;
      }

      .fieldlist li {
        list-style: none;
        padding-bottom: 1em;
      }
    </style>

    <div id="example">
      <h4>Choose Extra Equipment</h4>
      <ul class="fieldlist">
        <li>
          <input type="checkbox" id="eq1" checked="checked">
        </li>
        <li>
          <input type="checkbox" id="eq2" checked="checked">
        </li>
        <li>
          <input type="checkbox" id="eq3">
        </li>
        <li>
          <input type="checkbox" id="eq4">
        </li>
        <li>
          <input type="checkbox" id="eq5">
        </li>
        <li>
          <input type="checkbox" id="eq6">
        </li>
        <li>
          <input type="checkbox" id="eq7">
        </li>
      </ul>
    </div>  
    <script>
      $('#eq1').kendoCheckBox({
        checked: true,
        label: "Rear side airbags"
      });

      $('#eq2').kendoCheckBox({
        checked: true,
        label: "Leather trim",
        enabled: false
      });

      $('#eq3').kendoCheckBox({
        label: "Luggage compartment cover"
      });

      $('#eq4').kendoCheckBox({
        label: "Heated front and rear seats"
      });

      $('#eq5').kendoCheckBox({
        label: "Dual-zone air conditioning"
      });

      $('#eq6').kendoCheckBox({
        label: "Rain sensor"
      });

      $('#eq7').kendoCheckBox({
        label: "Towbar preparation",
        enabled: false
      });
    </script>

See Also

In this article