CODEWITHSUNDEEP
csscss-selectors
Gautam
Gautam

Reputation: 1740

CSS selector for a disabled and checked radio button's label

I am using C# .net I have a situation where I have a few pre-checked and disabled radio button lists on my screen. What I want is for checked and disabled radio buttons the text should be green and bold for that I have written the following CSS class

 input[type="radio"]:disabled  +label 
 {
     color: Gray;
 } 
 input[type="radio"]:checked  +label 
 {
     font-weight: bold; 
     color: Green;
 }
 input[type="radio"]:enabled  +label 
 {
     color: Black;
     font-weight: normal;
 }

This is working fine for firefox, IE9, and chrome. the issue comes when I try it in IE 8 and low.. that time the css does not get applied. Is there any way to apply the same effect for IE 6, 7 and 8?? P.S. I can't use jquery or javascript for this.. the only viable option is by using css

Upvotes: 4

Views: 17071

Answers (1)

haim770
haim770

Reputation: 49095

Except for the :enabled pseudo selector, you can achieve the same result with CSS2 attribute selectors and have it working just fine with IE7 and above:

 input[type="radio"][disabled] + label 
 {
     color: Gray;
 } 

 input[type="radio"][checked] + label 
 {
     font-weight: bold; 
     color: Green;
 }

Some would argue that the :enabled selector is redudant, and is actually the default style for input[type=radio] + label when no disabled/checked attributes defined.

Upvotes: 7

Related Questions