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

Place Input to the Right of Label when Using Checkbox Styling


Product Progress Kendo UI Grid
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