Set color of checkbox text

6 posts, 0 answers
  1. Jack
    Jack avatar
    8 posts
    Member since:
    May 2007

    Posted 29 Aug 2016 Link to this post

    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 

  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 30 Aug 2016 Link to this post

    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.
  3. Brian
    Brian avatar
    18 posts
    Member since:
    Sep 2019

    Posted 23 Apr in reply to Magdalena Link to this post

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

     

  4. Brian
    Brian avatar
    18 posts
    Member since:
    Sep 2019

    Posted 28 Apr in reply to Brian Link to this post

    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  

  5. Doncho
    Admin
    Doncho avatar
    42 posts

    Posted 28 Apr Link to this post

    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.
  6. Brian
    Brian avatar
    18 posts
    Member since:
    Sep 2019

    Posted 28 Apr in reply to Doncho Link to this post

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