it-blog.club
Красим радио и чекбоксы средствами css

Красим радио и чекбоксы средствами css

Я не удивлюсь если вам довольно часто использовать чекбоксы и радио в каких либо веб формах. И довольно часто клиенты просят их всячески раскрасить. Ну что же приступим, в этой статье я расскажу как при помощи самого обычного css можно сделать очень красивые инпуты типа checkbox и radio.

Для того что бы нам было хоть к чему то привязать нашу красоту, создадим элемент <label>


<div>
<input type="radio" name="newRadio" class="newRadioClass" id="firstRadio">
<label for="firstRadio" class="radio-label">Это первое радио</label>
</div>
<div>
<input type="radio" name="newRadio" class="newRadioClass" id="secondRadio">
<label for="secondRadio" class="radio-label">Это второе радио</label>
</div>

И так как вы видите, после каждого инпута мы создали по новому элементу label, которые привязали к тому или иному инпуту за счёт атрибута for в значении которого указали id каждого radio. А теперь мы можем написать наш CSS файл.

[css]
div{
display: block;
position: relative;
}
.newRadioClass{
opacity: 0;/*Скрываем наш инпут*/
}
.newRadioClass + .radio-label{
color: red;/*Просто выделим как нибудь наш label*/
}
.newRadioClass + .radio-label:before{/*создаём псевдо ПЕРЕД элементом*/
position: absolute;/Обязательно абсолютная /
border: 1px solid red;
border-radius: 10px;
content: "";
width: 10px;
height: 10px;
left: 10px;
top: 5px;
}
.newRadioClass:checked + .radio-label:after{/*Создаём псевдо ПОСЛЕ элемента, если наш радио проставлен*/
position: absolute;
border: 3px solid red;
border-radius: 50%;
content: "";
width: 0px;
height: 0px;
left: 13px;
top: 8px;
}
[/css]

После всего этого у нас получится вот такой результат:

красим радио и чекбоксы html

Данный пример был приведён с type='radio', на самом дела с чекбоксами всё в точности так же, разница заключается лишь в том, что необходимо заменить type='radio' на type='checkbox' и всё. И кстати по мимо заданных цветов и форм вы так же можете использовать изображения с помощью background-image;

И это всё, возможно статья оказалась довольно компактной, но по крайней мере отражает всё самое главное и необходимое. Не забывайте читать мой блог, подписываться на обновления, а так же делиться в соц. сетях.


it-blog.club 506
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать