Как оформить отключенную радиокнопку?

Question

У меня есть набор переключателей в ячейке таблицы. Цвет фона ячейки таблицы отличается от фона страницы.

На основании другого входа я иногда отключаю одну или несколько радиокнопок. Если этот параметр отключен, внутренняя часть переключателя принимает фон ячейки таблицы. Окраска круга немного затухает. Это объединяет, чтобы кнопка выглядела как «исчезнувшая». Более тщательная проверка показывает, что он все еще там.

Я изо всех сил пытался определить запись CSS, чтобы изменить внешний вид отключенной радиокнопки ... это можно сделать? В настоящее время я делаю что-то вроде этого:

.radio {
    background-color: #FFFFFF;
}

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

Придется ли мне прибегать к изображениям?

ОБНОВЛЕНИЕ Проблема не в фоне, а в внутренней части кнопки. При отключении внутренняя часть кнопки принимает цвет фона ячейки таблицы ... о, вот идея. Я изменяю как ячейку таблицы, так и переключатель.

Answer 1

Для этого вы можете использовать селектор атрибутов CSS [attributename].

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

Answer 2

Может быть, одно решение не отключить ничего, а просто

1. Изменить непрозрачность
2. Захват событий и реализация собственного поведения

Что-то вроде:

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

в вашем css напишите:

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

а затем, например, если вы используете jquery в своем javascript, напишите:

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

Answer 3

Простой способ изменить стиль отключенного переключателя - это простое наложение с абсолютным позиционированием с атрибутом: afterВы можете настроить цвет фона и границы по своему усмотрению.

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;

  }
}

вот пример ручки https://codepen.io/Cuberic/pen/PmQoVd

Answer 4

Замените их фоновыми изображениями.

Answer 5

Попробуйте добавить цвет границы, так как я считаю, что это начальный стиль кромки.

border-color #ffffff;

Также вы можете установить границу без стиля кромки.что-то в этом роде!