How to change the style of checkbox inside radcombobox in telerik ui?

Question

I am working with telerik ui combobox and enabled its checkbox property. Also I a using my custom skin. My problem is that I am not able to change the style of checkbox. I wanted to change how the checkbox style as per my requirements especially the background colour of checkbox and its shape. enter image description here

Answer 1

First, I advise that you check out the w3schools that explains how CheckBoxes can be styled at How TO - Custom Checkbox.

And now, inspect the Telerik ComboBox to understand how it is rendered. As you can see, this HTML structure differs a little bit from the one presented in the 3wschools tutorial.

Don't you worry, you can adjust that. Use your JavaScript/jQuery skills and imagination to bend the structure to your will.

Attach the OnClientLoad event to the ComboBox

<telerik:RadComboBox ID="RadComboBox1" runat="server" 
RenderMode="Lightweight" CheckBoxes="true" 
OnClientLoad="OnClientLoad">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
        <telerik:RadComboBoxItem Text="Item 3" />
        <telerik:RadComboBoxItem Text="Item 4" />
    </Items>
</telerik:RadComboBox>

When this event fires, make some changes to the HTML structure similar to the example from w3schools:

function OnClientLoad(sender, args) {
    // get reference to the ComboBox Items
    var $comboItems = $(sender.get_dropDownElement()).find('.rcbItem');

    // Loop through each item
    $comboItems.each(function () {
        var $item = $(this);
        // add the container class to the items
        $item.addClass('container');
        // render a span element inside the item
        $item.find('label').append('<span class="checkmark"></span>');
    })
}

You should now have a similar structure the CSS could work with:

You can now re-use the CSS from the w3schools tutorial with a slight change, that is by making the selectors more specific (stronger):

/* The container */
.RadComboBoxDropDown  .container {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.RadComboBoxDropDown .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.RadComboBoxDropDown .container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.RadComboBoxDropDown .container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.RadComboBoxDropDown .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.RadComboBoxDropDown .container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.RadComboBoxDropDown .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

More details on CSS Specificity

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;
• CSS !important: Don’t Use It. Do This Instead

The final Result of the Telerik ComboBox with customized CheckBox design

I tried to keep my answer as short as possible. Hope it will prove helpful ;)