./comments
./contacts telegram: @stikname
email: ;

Красивые checkbox и radio без javascript

Верстка
Как сделать красивые checkbox и radio на css3 без javascript


Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этой статье рассмотрен один очень простой способ, без использования JavaScript.

Создаём чекбокс:
<input type="checkbox" id="checkid" name="checkname" />
<label for="checkid"><span></span>My Check Box</label>


Для чекбокса и радио кнопок будем использовать следующий спрайт:
Красивый чекбокс и радиокнопка фото


При нажатии на чекбокс или радиокнопку спрайт будет меняться.

Стили для наших радиокнопок и чекбосов:
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:0 5px 0 0;
vertical-align:middle;
background:url(checkbox_and_radio.png) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(checkbox_and_radio.png) -19px top no-repeat;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:0 5px 0 0;
vertical-align:middle;
background:url(checkbox_and_radio.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(checkbox_and_radio.png) right top no-repeat;
}


Используемый нами псевдокласс :checked, работают в большинстве браузеров, но в Internet Explorer он скорее всего работать не будет.

В качестве примера не зарегистрированные пользователи могут посмотреть форму для комментариев, а все зарегистрированные раздел "Контакты".
22.02.2013 00:50:38
admin
3278
0
Комментарии

Тут еще нет комментариев, Вы можете стать первым...