RadTreeView Checkbox Styles

Question

I am trying to set custom styles for checkbox in a RadTreeView. It's simple enough just a different color for checked boxed and another color for unchecked boxes. But I am not sure how to do this.Couldn't find any built in Telerik method/property for this. Tried to do it with css like I usually do by hiding the checkbox and styling a div/span like a checkbox. But the html here is generated from RadTreeView and I am not sure how to apply the same here. The html that gets generated looks like this,

<li class="rtLI">
    <div class="rtMid">
        <span class="rtSp"></span>
        <span class="rtPlus"></span>
        <label>
            <input type="checkbox" class="rtChk">
            <span class="rtIn">Boston</span>
        </label>
    </div>

Any suggestions on how to style checkboxes in the RadTreeview? Thanks.

Answer 1

If we take this demo: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx

It looks they are using RadFormDecorator to style the checkboxes.

Your html looks like the one from the right hand side and its style is set by this css class:

.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
    background-image: url('FormDecorator/CheckBoxSprites.png');
}

So, if you too are using RadFormDecorator then you can override the above css rule by adding your own rule with higher specificity, e.g.

div.RadForm_Silk.RadForm.rfdCheckbox input[type="checkbox"]
{
    background-image: url('your_own_image.png');
}