This is a migrated thread and some comments may be shown as answers.

styling checkboxes

4 Answers 1489 Views

General Discussion

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

ruchin asked on 18 Nov 2015, 05:52 AM

checkbox.png

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.

4 Answers, 1 is accepted

answered on 19 Nov 2015, 11:59 AM

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.

Accepted

answered on 25 Nov 2015, 03:37 PM

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.