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

Place the Input to the Right of Label When Using Checkbox Styling in the Grid


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


Deprecated. This approach is applicable only on versions before Kendo UI R1 2020.


When I use the checkbox styling as shown in this demo and if I move the input element to the right of the label tag, the example stops working.

How can I place move the input element to the right of the label tag in the Grid when I use checkbox styling?


You are required to place the checkbox first and the label tag second, so that the label tag can be styled, based on the checkbox state.

.k-checkbox:checked + .k-checkbox-label {}

However, you can have more than one label per input. Leave the second k-checkbox-label blank, and place the text in a different label tag before the checkbox:

  <h4>Choose Extra Equipment</h4>
  <ul class="fieldlist">
      <label for="eq1">Rear side airbags</label>
      <input type="checkbox" id="eq1" class="k-checkbox" checked="checked">
      <label class="k-checkbox-label" for="eq1"></label>
      <label for="eq2">Leather trim</label>
      <input type="checkbox" id="eq2" class="k-checkbox" checked="checked" disabled="disabled">
      <label class="k-checkbox-label" for="eq2"></label>
      <label for="eq3">Luggage compartment cover</label>
      <input type="checkbox" id="eq3" class="k-checkbox">
      <label class="k-checkbox-label" for="eq3"></label>
      <label for="eq4">Heated front and rear seats</label>
      <input type="checkbox" id="eq4" class="k-checkbox">
      <label class="k-checkbox-label" for="eq4"></label>
      <label for="eq5">Dual-zone air conditioning</label>
      <input type="checkbox" id="eq5" class="k-checkbox">
      <label class="k-checkbox-label" for="eq5"></label>
      <label for="eq6">Rain sensor</label>
      <input type="checkbox" id="eq6" class="k-checkbox">
      <label class="k-checkbox-label" for="eq6"></label>
      <label for="eq7">Towbar preparation</label>
      <input type="checkbox" id="eq7" class="k-checkbox" disabled="disabled">
      <label class="k-checkbox-label" for="eq7"></label>
  .fieldlist {
    margin: 0 0 -1em;
    padding: 0;

  .fieldlist li {
    list-style: none;
    padding-bottom: 1em;
In this article