RadioButtonList How to set Forecolor of the Text for the items

[Keith]

I have an ASP.Net page with VB.net code-behind.

I have a number of telerik controls on the page like the RadMenu, RadButtons, RadTextBox, RadLabel, etc.

The page has a dark near black background.

I have just added the telerik RadioButtonList.  My default skin for all my ASP.Net pages is Office2007.

With the Office2007 skin, the text of the items in the RadioButtonList is Black.  I need the text of the items to be White.

How to override the forecolor of the text of the items without affecting the other telerik controls on the page?

 

Sincerely,

Keith Jackson

[Loïc]

Hi Keith!

I just have a similar problem last week, and I solved it by adding this CSS :

<style type="text/css">
  .RadRadioButton span.rbText.rbToggleRadio {
    color: white;
  }
</style>

 

Hope it helps.

[Keith]

Hi Loic,

    That does help.  But it only partially works.  The items not selected are WHITE.  The item selected still has the forecolor from the skin.  I need the text of all the items to be WHITE regardless if it is selected or not.  Thanks for your help!

Sincerely,

Keith Jackson

[Keith]

Actually it does make sense that the item selected is a different color so it is easier to see which item is selected.  But the selected item text still needs to be a bright color so it is easy to see against the dark background.  It would work good if the selected item text is YELLOW and the rest of the items be WHITE.  Just need help on how to do that.

Sincerely,

Keith Jackson

[Loïc]

Sorry Keith, I forgot this for the CSS :

<style type="text/css">
  .RadRadioButton span.rbText.rbToggleRadioChecked {
    color: white;
  }
</style>

 

[Keith]

Thanks Loic!

Combination of both CSS help achieve what I was looking to do.

The only problem I found now is the circle for all the items not selected is black and the radio button itself is blue which most likely coming from the Office2007 skin.  To resolve that I decided to set the skin of the RadRadioButtonList control to the Glow skin.

Now the text for all items is the color I was looking for and the radio button and the circle have a color that looks good against the dark background of the page.

Thanks for your help Loic!

Sincerely,

Keith Jackson

[Loïc]

Hi Keith!

Glad to have helped you.

Here is the complete answer (both CSS) :

<style type="text/css">
  .RadRadioButton span.rbText.rbToggleRadio {
    color: white;
  }
  .RadRadioButton span.rbText.rbToggleRadioChecked {
    color: white;
  }
</style>