checkbox label before checkbox input

[Roger]

Hi, i'm wondering if it is possible to style a checkbox such that the label text is before the checkbox control, rather than the other way around.

My markup being something like so:

    <input id="wid" class="ax-unselectable k-checkbox" type="checkbox"> <label for="wid class="k-checkbox-label">label text</label>

There are a number of :before and :after rules associated with k-checkbox-label, but i don't see any obvious mechanism to get the label to come first.

Anyone ever done or requested that?

 

Thanks

roger

[Alex Gyoshev]

Hello Roger,

The Kendo UI checkbox styling requires the rendering to have first the checkbox, then the label tag, so that the latter 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 k-checkbox-label blank, and place the text in a different label tag, before the checkbox:

    <label for="wid">label text</label>
    <input id="wid" class="ax-unselectable k-checkbox" type="checkbox">
    <label for="wid" class="k-checkbox-label"></label>

Regards,
Alex Gyoshev
Telerik

 

 

[Roger]

That seems to do the trick. Thanks.