How to style a disabled radio button?

Question

I have a set of radio buttons within a table cell. The table cell's background color differs from the page background.

Based on another input, I sometimes disable one or more radio buttons. When disabled, the interior of the radio button assumes the table cell's background. The circle coloring grays out a bit. This combines to make the button look like it "disappeared". Closer inspection shows it to still be there.

I've been struggling to define a CSS entry to change the appearance of the disabled radio button... can it be done? Currently, I'm doing something like this:

.radio {
    background-color: #FFFFFF;
}

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

Will I have to resort to images?

UPDATE It's not the background that's the problem, but the interior of the button. When disabled the interior of the button takes on the background color of the table cell... ooh, here's an idea. I change both the table cell and the radio button.

Halley

Answer 1

You can use the CSS attribute selector [attributename] for this.

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

Hawthorne

Just to mention that attribute selectors do not work in IE6, better to use a specific class in the css file that you can then reference. This way you can make sure that disabled styling works for all browsers. – Tilburg

Also, it's possible for an element to have the "disabled" attribute, but for its value to be false. – Depict

@Brian: I don't care about IE6 anymore wrt non-functional issues ;) @Pointy: I've HTML in mind, not XHTML. Its value can btw also be disabled, i.e. disabled="disabled". How annoying, that XHTML ;) – Hawthorne

-1 vote cause the solution don't work. Not able to change the background color of a disabled radio button. Tested on Firefox and Chrome. – Endowment

works fine on Firefox 61 you can also cascade the attributes: input[type="radio"][disabled]{ cursor: not-allowed; } – Testee

Answer 2

Maybe one solution is not disable anything and just

1. Change the opacity
2. Capture events and implement your own behaviour

Something like:

<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 your javascript write:

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

Selfdeprecating

sorry... i tought it was not sent – Selfdeprecating

Answer 3

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

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

Echo

Answer 4

Try adding the border colour as i believe thats the initial edge styling.

border-color #ffffff;

Also you might want to set the border to have no edge styling.

border: 0px solid #ffffff;

Or something along them lines!

Kennakennan

Answer 5

Replace them with background images.

Behead