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

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

1 голос
/ 12 июля 2011

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

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

input[type="radio"] {
  background: red;
}
<input type="radio" /> RadioButton

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

Ответы [ 5 ]

1 голос
/ 24 сентября 2011

В качестве альтернативы можно изменить границу с помощью 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 */
}
1 голос
/ 01 июля 2013

Краткий ответ - «нет».

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

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

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

0 голосов
/ 29 августа 2018

Чтобы изменить цвет фона для ввода переключателя Только в 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. */
}
0 голосов
/ 30 октября 2017

Я знаю, что это старый вопрос, но он все равно поднимается довольно высоко, если вы зададите вопрос в 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;
}
0 голосов
/ 12 июля 2011

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

Здесь

...