Изменить цвет фона переключателя

Question

Можно ли изменить цвет фона для ввода переключателя в Firefox/Chrome, как в IE? (Без использования изображений)

Запустите это в IE(<9) и Firefox/Chrome:

input[type="radio"] {
  background: red;
}

<input type="radio" /> RadioButton

Посмотреть на JSFiddle

Answer 1

Добавьте этот атрибут в селектор входа радио.

      input[type="radio"]{
  accent-color:green;
}

Answer 2

В качестве альтернативы можно изменить границу с помощью CSS.

Это входное радио:

<input name="myinput" id="myinput" type="radio" value="1" class="highlighted" />

И это CSS:

.highlighted {
    outline:1px solid #F00; /* Firefox, Opera, Chrome, IE8+ */
    *filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000); /* IE6, IE7 */
}

Answer 3

Короткий ответ - нет".

Даже если вам удастся получить что-то, что работает в одном браузере, браузеры, как правило, обрабатывают элементы управления формой совсем по-другому, а это означает, что практически невозможно достичь кросс-браузерной совместимости.

Разочаровываю, я знаю. Проверьте эту статью для получения дополнительной информации: http://www.456bereastreet.com/archive/200409/styling_form_controls/

Кстати, почему вы хотите изменить цвет фона? Как правило, фон переключателя будет просто выбирать цвет фона своего контейнера.

Answer 4

Попробуй это:

.your-class { accent-color: red; mix-blend-mode: multiply; }

Answer 5

Я знаю, что это старый вопрос, но он все равно поднимается довольно высоко, если вы зададите вопрос в Google, так что вот мое решение.

Стиль <label> элемент, который находится сразу после переключателя.

HTML

<input type=radio name="colour" value="green" id="colour-green" /><label for="colour-green" ></label>
<input type=radio name="colour" value="red" id="colour-red" /><label for="colour-red" ></label>
<input type=radio name="colour" value="blue" id="colour-blue" /><label for="colour-blue" ></label>

CSS

input[type=radio]{
    display:none;
}
input[type=radio] + label{
    border: 1px solid black;
    background-color: red;
    border-radius: 50%;
    display: block;
    ...
}
input[type=radio]:checked + label{
    background-color: green;
}

Answer 6

Во-первых, вам необходимо отключить стили по умолчанию, предоставляемые браузером. Затем вы можете изменить цвет фона.

          input[type="radio"] {
     -webkit-appearance: none; /* For WebKit (Chrome, Safari, Opera) browsers */
     -moz-appearance: none; /* For Mozilla Firefox */
     appearance: none; /* For standard browsers */

     background: red; /* Change the background color */

}

Answer 7

Чтобы изменить цвет фона входной кнопки переключателя Только в IE

HTML

<input type="radio" name="custom">  
<input type="radio" name="custom">

CSS

input[type=radio] {
  width: 20px;
  height: 20px;
}
/* This will make the border gray when the button is not checked. */
input[type=radio]:not(:checked)::-ms-check {
  border-color: gray; 
}
input[type=radio]::-ms-check {
  border-color: red; /* This will make the border red when the button is checked. */
  color: red; /* This will make the circle red when the button is checked. */
}

Answer 8

Радио ввода - это просто круг, поэтому вы можете изменить стиль тега или

следующим образом:

Вот

-5

Источник Поделиться

user703907 12 июл '11 в 10:43 2011-07-12 10:43

2011-07-12 10:43