styling checkboxes

[ruchin]

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.

[Dimitrina]

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

 

 

[ruchin]

Hi,

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

Thanks,

Ruchin Dayal.

[Dimitrina]

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

 

 

[ruchin]

Hi Dimitrina,

Thank you very much.It worked for me.

Regards,

Ruchin Dayal