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.

Answer 1

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

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

Answer 2

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