checkbox label before checkbox input

3 posts, 1 answers
  1. Roger
    Roger avatar
    14 posts
    Member since:
    Aug 2012

    Posted 25 Feb 2016 Link to this post

    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?




  2. Answer
    Alex Gyoshev
    Alex Gyoshev avatar
    2515 posts

    Posted 29 Feb 2016 Link to this post

    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>

    Alex Gyoshev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Roger
    Roger avatar
    14 posts
    Member since:
    Aug 2012

    Posted 29 Feb 2016 in reply to Alex Gyoshev Link to this post

    That seems to do the trick. Thanks.
Back to Top