В этом уроке я покажу Вам как можно заменить стандартные кнопки и чекбоксы с помощью 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>

Ну и чтобы все работало, конечно же, не забываем в шапке документа подключить сам скрипт.