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

Set color of checkbox text

5 Answers 1028 Views
CheckBox
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 29 Aug 2016, 02:18 PM

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 

5 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 30 Aug 2016, 07:34 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Brian
Top achievements
Rank 1
Veteran
answered on 23 Apr 2020, 02:09 PM

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" />

 

0
Brian
Top achievements
Rank 1
Veteran
answered on 28 Apr 2020, 01:01 PM

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  

0
Doncho
Telerik team
answered on 28 Apr 2020, 01:36 PM

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

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

I hope that helps.

Kind regards,
Doncho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Brian
Top achievements
Rank 1
Veteran
answered on 28 Apr 2020, 06:56 PM
Thanks Doncho, good to know. I saw some of this exposed in Firefox Developer which helped me find the solution I posted. 
Tags
CheckBox
Asked by
Jack
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Brian
Top achievements
Rank 1
Veteran
Doncho
Telerik team
Share this question
or