В этом уроке я покажу Вам как можно заменить стандартные кнопки и чекбоксы с помощью JavaScript.
Хотели ли Вы когда либо использовать собственные изображения для чекбоксов, радио кнопок или списков выбора? Этот скрипт поможет Вам в этом. Данное решение прекрасно откатывается при выключенном JS, и идет отображение обычных элементов.
Его использовать очень легко:
<input type="checkbox" class="styled" />
картинка
Как все работает?
JavaScript находит все элементы форм с классом styled, прячет реальное содержимое, и, в конце, добавляется события мышки к span, который управляет внешним видом.
Для того, чтобы чекбоксы, радио кнопки и поля выбора работали верно, необходимо поменять 3 переменные в скрипте: checkboxHeight, radioHeight и selectWidth на строках 21-23. Если Вы будете использовать изображения из исходников, тогда ничего не надо будет менять, но если Вы создадите собственные, тогда это необходимо.
Чекбоксы и радио кнопки связаны с прозрачными PNG изображениями, которые Вы можете свободно использовать. Первые 2 переменные - это высота единичного шага чекбокса и радиокнопки, а 3 - это ширина поля выбора (select box). Возможно, при создании собственных картинок, Вам будет необходимо потратить некоторое время на настройку этих переменных, чтобы все верно работало.
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";
CSS
Если Вы создаете собственные изображения, Вам может придется внести несколько изменений в таблицу стилей. В .checkbox и .radio свойство height должно быть 1\4 полной высоты изображения. Возможно, Вам также придется изменить свойство width в селекторе .select.
.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
.radio {
background: url(radio.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(select.gif) no-repeat;
overflow: hidden;
}
XHTML
Скрипт не будет ничего делать до тех пор, пока Вы ему не укажите на чем применять эти изменения. Достаточно просто добавить класс styled любому чекбоксу, радио кнопке и т.д.
Чекбокс
<input type="checkbox" name="a" class="styled" />
Радио кнопка
<input type="radio" name="radio" class="styled" /> Yes
<input type="radio" name="radio" class="styled" /> No
Список выбора
<select name="d" class="styled">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Ну и чтобы все работало, конечно же, не забываем в шапке документа подключить сам скрипт.