Переключатели меняют цвет фона CSS или фоновое изображение (простой код без меток)

Question

Переключатели меняют цвет фона CSS или фоновое изображение (простой код без меток)

0

Есть ли способ только с помощью css изменить внешний вид переключателей. Но, простое входное радио, а не с регулировкой метки css.

Например, вот мой код: FIDDLE

<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">

Тогда вот мой css:

input[type=radio] {  
    display: none;  
}  

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}

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

user3392725 15 апр. 2014, в 21:51

Источник

0

В основном ... нет.
Paulie_D 15 апр. 2014, в 19:26
0

Немного, если вообще что-нибудь, вы можете сделать с одним элементом (даже используя: before или: after), если вы установили отображение на none.
j08691 15 апр. 2014, в 19:31
1

Что не так с использованием <label> ? Это практически единственный способ сделать это, используя только CSS
Dryden Long 15 апр. 2014, в 19:31

Показать ещё 1 комментарий

Теги:

html

css

radio-button

1 ответ

Ещё вопросы

Немного, если вообще что-нибудь, вы можете сделать с одним элементом (даже используя: before или: after), если вы установили отображение на none.
Что не так с использованием <label> ? Это практически единственный способ сделать это, используя только CSS

SombreErmine · Answer 1 · 2014-04-15T21-37-00.000Z

С экспериментальным свойством pointer-events это возможно. Хотя, я настоятельно рекомендую (правильно) использовать ярлыки для увеличения доступности для вашего сайта. Ярлыки также позволят использовать более широкий диапазон совместимости с браузером. Кроме того, поскольку это экспериментальное свойство, я не уверен в его будущем существовании или поддержке.

JSFiddle

Список поддержки pointer-events

Код CSS:

input[type=radio]:before {
    display: block;
    width: 19px;
    height: 19px;
    content: '';
    position: absolute;
    background-image: url(http://placekitten.com/19/19);
    pointer-events: none;
}

input[type=radio]:checked:before {
    background-image: url(http://placekitten.com/25/25);
}

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}

Это сработало для вас? Я думал, что нет никакого способа использовать before или after на не контейнерах - посмотрите это .
Ага. Казалось, JSFiddle не работает, потому что веб-сайт, который я использовал для изображений, кажется, сломан. Я обновил JSFiddle с помощью альтернативного сайта-заполнителя.