styling checkboxes

5 posts, 1 answers
  1. ruchin
    ruchin avatar
    33 posts
    Member since:
    Jun 2015

    Posted 17 Nov 2015 Link to this post

    Hi,

    I have a list of checkboxes. How can I change the background color of the checkbox when checked?

    Following is my code:

     <tr>
                            <td style="padding-top: 6px;">
                                <label class="km-checkbox-label">
                                    <b>Food:</b></label>
                            </td>
                            <td>
                                <input type="checkbox" class="km-checkbox" id="food" value="Food"/>
                            </td>
                            <td style="padding-top: 6px;">
                                <label class="km-checkbox-label">
                                    <b>Hotel:</b></label>
                            </td>
                            <td>
                                <input type="checkbox" class="km-checkbox" id="hotel" value="Hotel"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-top: 6px;">
                                <label class="km-checkbox-label">
                                    <b>Attraction:</b></label>
                                    </td>
                                    <td>
                                <input type="checkbox" class="km-checkbox" id="attraction" value="Attraction"/>
                            </td>
                            <td style="padding-top: 6px;">
                                <label class="km-checkbox-label">
                                    <b>Shopping:</b></label>
                                    </td>
                                    <td>
                                <input type="checkbox" class="km-checkbox" id="shopping"  value="Shopping" />
                            </td>
                        </tr>

    I wanted to achieve a checkbox which is shown in the attached file.

    Thanks,

    Ruchin Dayal.

  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 19 Nov 2015 Link to this post

    Hello Ruchin,

    If the CheckBox is defined like so:
    <input type="checkbox" id="eq3" class="k-checkbox">
    <label class="k-checkbox-label" for="eq3">Luggage compartment cover</label>

    Then, you can apply the following style, so that to fill it with red color when checked:
    <style>
      .k-checkbox:checked + .k-checkbox-label::before{
        background-color:red;
          border-color: red;
      }
     </style>

    You can also refer to the following resources: 
    Styling Checkboxes 
    Appearance and Styling Kendo UI widgets.

    Regards,
    Dimitrina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. ruchin
    ruchin avatar
    33 posts
    Member since:
    Jun 2015

    Posted 23 Nov 2015 in reply to Dimitrina Link to this post

    Hi,

    Using the css that you have mentioned is it possible to achieve the same for class="km-checkbox" ?

    Thanks,

    Ruchin Dayal.

  4. Answer
    Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 25 Nov 2015 Link to this post

    Hello Ruchin,

    CheckBoxes/Radio buttons cannot be styled with CSS only. Do you wish to style the CheckBoxes in a mobile app? If so, then I should let you know that Kendo UI Mobile CheckBoxes styling is currently available only for nova skin.
     
    In order to achieve the desired style you will need a custom css. Furthermore, we rely that the
    <input> element is immediately followed by a <label> element with respectively k-checkbox-label / k-radio-label classes.

    A code snippet illustrating a possible approach is available here.  

    Regards,
    Dimitrina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  5. ruchin
    ruchin avatar
    33 posts
    Member since:
    Jun 2015

    Posted 26 Nov 2015 in reply to Dimitrina Link to this post

    Hi Dimitrina,

    Thank you very much.It worked for me.

    Regards,

    Ruchin Dayal

Back to Top