How to configure a disabled switch?

Question

I have a set of radio buttons in a table cell. The background color of the table cell is different from the background of the page.

Based on another input, I sometimes turn off one or more switches. When disabled, the inside of the switch accepts the background of the table cell. The color scheme colors a bit. This combines to make the button look like it has “disappeared”. A closer inspection reveals that he is still there.

I am trying to define a CSS entry to change the appearance of a disabled switch ... can this be done? I am currently doing something like this:

.radio { background-color: #FFFFFF; } .radio:disabled { background-color: #FFFFFF; } 

Will I have to resort to images?

UPDATE This is not a background problem, but the inside of the button. When disabled, the inside of the button takes the background color of the table cell ... oh, here's the idea. I change both the table cell and the switch.

Answer 1

You can use the CSS attribute selector [attributename] .

 .radio[disabled] { background-color: #FFFFFF; } 

Answer 2

Perhaps one solution does not disable anything and just

• Change the opacity
• Capturing events and implementing your own behavior

Sort of:

 <input type="radio" name="i1" class="enabledinput" /> 

in your css write:

 .disabledinput { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } .enabledinput { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } 

and then for example if you use jquery in javascript write:

 $(".enabledinput").each(function(i,obj) { $(obj).click(function(evt) { $(obj).removeClass("enabledinput"); $(obj).addClass("disabledinput"); /*do something here*/ }); }); 

Answer 3

Try adding border color, as I consider this to be the starting edge style.

 border-color #ffffff; 

You can also set the border to not have edge style.

 border: 0px solid #ffffff; 

Or something along their lines!

Answer 4

Replace them with background images.

Answer 5

An easy way to change the style of a disabled radio button is to use a simple absolute positioned overlay with the after attribute after. You can adjust the background color and border as you wish.

 input[disabled] { position: relative; height:15px; width: 15px; box-sizing: border-box; margin: 0; &:after { position: absolute; content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background-color:red; } } 

here is an example pen https://codepen.io/Cuberic/pen/PmQoVd