HTML CSS

Простой способ, как придать стили для переключателей и чекбоксов без использования JS.

Блок, в котором мы хотим, чтобы применялась кастомизация радио и чекбоксов должен иметь класс custom-form

В цсс правильно следует прописать путь к своим "выключенная кнопка" и "включенная кнопка".

HTML:

<section class="custom-form">
<input type='radio' id='Choice1' name='Choice'>
<label for='Choice1'>Первый выбор</label><br>
<input type='radio' id='Choice2' name='Choice'>
<label for='Choice2'>Второй выбор</label><br>
<input type='radio' id='Choice3' name='Choice'>
<label for='Choice3'>Третий выбор</label><br>
<input type='radio' id='Choice4' name='Choice'>
<label for='Choice4'>Четвертый выбор</label><br>
</section>

CSS:

.custom-form label {padding:2px 0px 2px 20px;}
.custom-form input[type=radio] {display:none;}
.custom-form input[type=radio] + label {background:url(выключенная кнопка) no-repeat 0px 0px;}
.custom-form input[type=radio]:checked + label {background:url(включенная кнопка) no-repeat 0px 0px;}

Точно так же и для input type="checkbox".

Предупреждение!

Внимание! В ИЕ8 и ниже не работает :checked

 

Добавить комментарий


Защитный код
Обновить