Set color of checkbox text

[Jack]

Recently I submitted a support ticket to find out how I could change the color of the text of a RadCheckBox. I'm not as fluent in css as I should be so I thought I would share my findings for others like me with limited css skills.

To change the color of the text of all checkboxes on the page create the following css rule

<style>
    .rbText  {
       color: red !important;
    }
</style>

If you need to change the color of only some checkboxes (in my case I have a couple that are required and I wanted to make the red leaving all others black) you can create a rule that looks like this

<style>
    .required .rbText  {
       color: red !important;
    }
</style>

and then assign the required css class to the checkbox like this

<telerik:RadCheckBox ID="blnCorrectiveAction" runat="server" Text="Corrective Action Necessary" CssClass="required"></telerik:RadCheckBox>

I'm sure the css pros think this is silly simple thing so say but for those of us that struggle I hope this helps 

[Magdalena]

Hi Jack,

Thank you for sharing your knowledge with the community.

This solution will work for all RadButton-s as well. If you would like to specify only check-boxes, you can use the following CSS:

html .RadButton.rbCheckBox .rbText {
    color: red;
}

Adding the "html" you will make the selector stronger as the inbuilt styles, so you do not have to use !important.

Regards,
Magdalena
Telerik by Progress

[Brian]

I use a css for each style of telerik skins. The checkboxes might reside on a different background color, so i use the css sheet to determine the correct color.

This will change the FONT color correctly, however it doesnt change the box if its checked. The unchecked box will show the color from the css below. When i hover and the checkbox IS checked it changes the style of the checkbox as well. If its UNCHECKED it doest change the css due to the css below.

.colorOptAdd .rbText {
    color: #ffffff !important;
}

 

My question is how to change the box color of the checkbox to match the font color if its checked. As my images are attached, you can see the non-checked, the checked and the hover over the checked instances of the checkboxes.

 

<telerik:RadCheckBox runat="server" Text="Send To Attendees" ID="RadCheckBoxAttendees" RenderMode="Lightweight" AutoPostBack="false" Checked="true" CssClass="colorOptAdd" />

<telerik:RadCheckBox runat="server" Text="Send To Non-Attendees" ID="RadCheckBoxNonAttendees" RenderMode="Lightweight" AutoPostBack="false" Checked="false" CssClass="colorOptAdd" />

 

[Brian]

Digging around your css a bit. If anyone needs to change the checkbox box color

 

.colorOptAdd .rbToggleCheckbox

colorOptAdd. .rbToggleCheckboxChecked

 

I can set this in my CSS files  

[Doncho]

Hi Brian,

I am glad to know that you have found the solution. 

For you and your fellow developers here is some more on the issue.

You can use the following CSS selectors to modify the appearance of the RadCheckBox:

To change the color of the checkbox when it is:

1.Checked

html body .RadButton .rbToggleCheckboxChecked,
html body .RadButton .rbToggleCheckboxFilled {
    color: #fff;
}

2. Checked and on hover:

html body .RadButton.rbHovered .rbToggleCheckboxChecked,
html body .RadButton.rbHovered .rbToggleCheckboxFilled {
    color: #fff;
}

3. Not checked

html body .RadButton.rbCheckBox .rbIcon,
html body .RadButton.rbToggleButton .rbIcon {
    color: #fff;
}

To change the text color of the CheckBox I would suggest you use:

html body .RadButton.rbCheckBox .rbText,
html body .RadButton.rbToggleButton .rbText{
    color: #fff;
}

You can find some helpful tips on how to debug and inspect styles of the generated HTML in  the Improve Your Debugging Skills with Chrome DevTools blog post.

More helpful resources about CSS specificity can be found in the following articles

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

More about CSS styling and using the Browser's developer tools, you may find in the following videos: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

I hope that helps.

Kind regards,
Doncho
Progress Telerik

[Brian]

Thanks Doncho, good to know. I saw some of this exposed in Firefox Developer which helped me find the solution I posted.