Свой стиль для Checkbox, Select и Radio

Одним файлом CSS обойтись никак не получится, но если воспользоваться скриптом, то мы можем сделать самое красивое оформление для элемента Checkbox, Select и Radio в нашей форме. Свой стиль для Checkbox, Select и Radio вы можете сохранить в нескольких изображениях. Сначала Вам необходимо прикрепить к странице скрипт, и только затем установить стиль. Обязательно нужно дать классы тем элементам, к которым мы хотим прикрепить стиль.

Пример



Изображения можно скачать ниже

Код JavaScript

<script src="//yraaa.ru/_ld/0/63_candr.js"></script>

Файл скрипта можно скачать по соответствующей ссылке.

Код CSS

<style> .checkbox, .radio { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(//yraaa.ru/_pu/5/25230809.gif) no-repeat; display: block; clear: left; float: left; } .radio { background: url(//yraaa.ru/_pu/5/65600522.gif) no-repeat; } .select { position: absolute; width: 158px; height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(//yraaa.ru/_pu/5/77285789.gif) no-repeat; overflow: hidden; } </style>

Код HTML

Checkbox <input type="checkbox" name="a" class="styled"> Radio <input type="radio" name="radio" class="styled"> Yes <input type="radio" name="radio" class="styled"> No Select <select name="d" class="styled"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>