Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 621
Gautam Avatar asked Sep 12 '25 19:09

Gautam


1 Answers

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.

like image 104
haim770 Avatar answered Sep 15 '25 11:09

haim770