Войти
Люди
Помощь
Donald Trump

Стилизация checkbox с помощью css3

И так, мне вот именно сейчас понадобилось сделать красивый и легкий (простой) стиль чекбокса (checkbox). Но так как по стандарту он не красивый, а прибегнуть к использованию js ради одного чекбокса я был не готов я решил прибегнуть к CSS3. Иначе зачем ему "3" в конце. Да и если честно, то и не любитель я делать через javascript.
И так, checkbox получился вот такой вот:
Изображение
Красиво, удобно и понятно.

Начнем


Для начала в страницу вставляем сам checkbox:
  1. <input class="cheac1" id="check1" type="checkbox" name="glavs" value="1">
  2. <label class="cheac2" for="check1">Выставить на главную</label>

Далее нам необходимо будет установить ему стиль. Это мы сделаем с помощь style (уверен вы знали про это):
  1. // Скрываем чекбокс
  2. input[type=checkbox].cheac1 {display: none; }
  3. // Тут показываем "подменный" чекбокс
  4. label.cheac2:before {content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; border: 1px solid #4f5a6e; }
  5. // Устанавливаем расположение у него
  6. label.cheac2 {cursor: pointer; position: relative; padding-left: 25px; }
  7. // Отображение самого + после нажатия
  8. .cheac1:checked + label.cheac2:before {content: "+"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #ff0000; text-align: center; line-height: 15px; }

Ну вот и все, это был самый легкий пример который использую я.