Я уже рассматривал верстку форм на примере формы обратной связи. Однако некоторые моменты были все же упущены или рассмотрены не до конца. Так что продолжаем подробно вникать в данную тему.

На этот раз рассмотрим стилизацию чекбоксов. Чекбокс, он же флажок, заслуживает отдельной статьи из-за сложностей с оформлением. Конечно в Сети есть множество решений с использованием разнообразных jQuery-плагинов, но все же не всегда целесообразно подключать лишний файл-скрипт, когда можно сделать все обычным CSS и совсем небольшим вкраплением JS или jQuery.

Содержание статьи

1. Разметка
2. CSS + jQuery

Разметка

Как и положено, начнем с разметки. Что представляет из себя чекбокс? Это поле <input> для установки галочки напротив какого-либо пункта, оно может быть активно либо неактивно:

<input type="checkbox" name="checkbox-1" value="Я - чекбокс!"> <span>Чекбокс</span>

Увы, данный элемент не получится стилизовать: нельзя изменить фон, цвет и т.д. Решение — обернуть поле контейнером, убрать прозрачность opacity до нуля (функциональность сохранится), а стили задавать контейнеру. Контейнер мы будем добавлять скриптами jQuery. Почему — узнаете чуть позже.

Сейчас у нас всего лишь один чекбокс, в формах это бывает достаточно редко. Давайте добавим еще несколько, сделаем к примеру выбор нескольких товаров в форме и кнопку «Отправить». Также обернем все наши элементы тегом <label> с атрибутом for, значение которого равно id дочернего поля, чтобы впоследствии при клике на соседний элемент с текстом поле тоже становилась активным или неактивным. Польза от этого очевидна:

Еще я использую <div class="divider"> в качестве разделителей строк. Вот такая разметка получилась у меня в итоге:

<form action="#" id="user-form" class="user-form">
  <fieldset>
    <legend>Выбор товара</legend>
    <div class="divider">
      <label for="check-1">
        <input type="checkbox" id="check-1" class="element-checkbox" name="check-1" value="Портфель"><
        <span>Портфель</span>
      </label>
    </div>
    <div class="divider">
      <label for="check-2">
        <input type="checkbox" id="check-2" class="element-checkbox" name="check-2" value="Чемодан">
        <span>Чемодан</span>
      </label>
    </div>
    <div class="divider">
      <label for="check-3">
        <input type="checkbox" id="check-3" class="element-checkbox" name="check-3" value="Саквояж">
        <span>Саквояж</span>
      </label>
    </div>
    <input type="submit" id="submit-form" class="submit-btn" value="Отправить">
  </fieldset>
</form>

CSS + jQuery

Итак, теперь наша главная задача — скрыть чекбоксы применением opacity, добавить скриптами обертку .wrap-checkbox и применить на нее оформительские стили — добавить фон, изменить размеры и т.д., причем на два состояния — активное и неактивное.

Разберемся со скрытием стандартных полей. Можно конечно просто скрыть элементы, прописав opacity в файле стилей, однако так мы делать не будем, а воспользуемся скриптами. Почему?

1. Первое и самое главное — в случае выключенного JavaScript у браузера, которым мы будем делать активным или неактивным наш псевдочекбокс <span>, поле станет недоступным — обертка не будет работать, а поле останется прозрачным. В случае же добавления opacity скриптом мы такой проблемы не получим — если JS будет выключен, то будет доступен стандартный чекбокс. Необходимо заботиться о пользователе с выключенным JS
2. Второе — не нужно будет дополнительно прописывать фильтр opacity для Internet Explorer из-за непонимания этим браузером css-свойства opacity (характерно для IE<9). jQuery сам добавит его автоматически

Как видите — одни плюсы, поэтому смело пишем код:

// прозрачность для всех полей-чекбоксов на странице
$('input[type=checkbox]').css({'opacity': 0});

А теперь обернем поле:

// добавили обертку для элементов
$('input[type=checkbox]').css({'opacity': 0}).wrap('<span class="wrap-checkbox"></span>');

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

Отлично, поля стали невидимыми, можно приступать к оформлению обертки. На просторах Сети я нашел вот такой простенький вариант дизайна чекбокса:

Такие изображения естественно лучше всего сделать спрайтом. Теперь применим стили и зададим стили для нашей обертки .wrap-checkbox, предусматривая два варианта — неактивное и активное поле (пропишем стили для класса .active):

.wrap-checkbox {
  background: url(images/checkbox.png) no-repeat 0 0;
  display: block;
  float: left;
  height: 26px;
  width: 26px;
}
.wrap-checkbox.active {
  background: url(images/checkbox.png) no-repeat -26px 0; /* изменяем background-position при активном чекбоксе */
}

Теперь добавим еще немного jQuery — при на клике на элемент-обертку будем переключать у него класс .active:

$('.wrap-checkbox').click(function() {
  $(this).toggleClass('active'); /* переключатель класса .active */
})

Отлично, вообщем-то теперь все готово, остальные стили чисто оформительские и к нашей задачи прямого отношения не имеют. Единственное, что еще хотелось бы отметить — запрет выделения при клике на тег <label>. При множественных кликах текст будет выделяться, я отменил это поведение для улучшения юзабилити формы:

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Для запрета выделения в Internet Explorer ниже девятой версии необходимо добавить атрибут unselectable со значением on:

<!-- запретили выделение в IE<9 -->
<span unselectable="on">Здесь невыделяемый текст</span>

Итоги

Как видите, немного труда и мы получили отличный работающий чекбокс, который можно смело применять в ваших формах. Единственный недостаток, на который я пока не нашел решения — это невозможность выделять пункты табами, т.к. псевдокласс :focus работает с ограниченным числом элементов (<a>, <input>, <select> и <textarea>).

Проверено

• Internet Explorer 7+
• Opera
• Firefox
• Google Chrome
• Safari