Blog. Just Blog

Стилизация checkbox с использованием CSS и JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.
  1. <style type="text/css">
  2. /* Стиль для обертки отмеченного checkbox'а */
  3. div.boxChecked {
  4.     backgroundurl("checkbox.gif"no-repeat 0 3px;
  5. }
  6. /* Стиль для обертки неотмеченного checkbox'а */
  7. div.boxUnchecked {
  8.     backgroundurl("checkbox.gif"no-repeat 0 -18px;
  9. }
  10. /* Прозрачный стиль для checkbox'а */
  11. div.boxChecked inputdiv.boxUnchecked input {
  12.     cursorpointer;
  13.     margin0px;
  14.     padding0px;
  15.     width16px;
  16.     opacity0;
  17.     -moz-opacity0;
  18.     -khtml-opacity0;
  19.     filterprogid:DXImageTransform.Microsoft.Alpha(opacity=0);
  20. }
  21. </style>
Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания. Кроссбраузерный стиль checkbox'а устанавливает для него полную прозрачность. К сожалению, специфические определения стиля типа -moz-opacity, -khtml-opacity и filter не соответствуют спецификации CSS, поэтому, если вы хотите добиться полного прохождения валидатора, то придется извернуться с JavaScript.
  1. // Корректировка стилей под разные браузеры
  2. var css=document.styleSheets[0];
  3. try {
  4.     // Попробуем добавить стиль для IE
  5.     css.addRule('.boxCheckbox',
  6.           'filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);');
  7. }
  8. catch(e) {
  9.     // Добавить стиль для движков Gecko и WebKit
  10.     css.insertRule('.boxCheckbox { -moz-opacity: 0; -khtml-opacity: 0; }',
  11.           css.cssRules.length);
  12. }
Осталось сделать HTML-разметку и добавить обработчики кликов на прозрачные checkbox'ы. Как мы говорили в самом начале, элементы ввода помещены внутри "обертки":
  1. <div>
  2.   <input class="boxCheckbox" type="checkbox" id="chk1" onclick="doCheckbox(this);"
  3.   checked="checked"> - <label for="chk1">стилизованный checkbox 1</label>
  4. </div>
  5. <div>
  6.   <input class="boxCheckbox" type="checkbox" id="chk2" onclick="doCheckbox(this);">
  7.   - <label for="chk2">стилизованный checkbox 2</label>
  8. </div>
После загрузки страницы надо привести состояние "оберток" в соответствие с состоянием вложенных в них checkbox'ов. Это позволит не заморачиваться с прописыванием стилей в HTML, а также будет корректно отрабатывать состояние при ручном обновлении страницы через F5.
  1. // Установка стилей в соответствии с текущим состоянием чекбоксов
  2. // на странице
  3. var el=document.getElementsByTagName('input');
  4. for (var i=0i<el.lengthi++) {
  5.     if (el[i].type.toLowerCase()=='checkbox') {
  6.         doCheckbox(el[i]);
  7.     }
  8. }
Остался последний штрих - собственно сам обработчик. У меня подразумевается, что "обертка" сделана тегом div, а названия классов стилей такие, как описано в начале статьи. В случае необходимости вы можете подкорректировать их под свои нужды.
  1. // Обработка состояния чекбокса
  2. function doCheckbox(elem) {
  3.     // Чекбокс должен быть внутри DIV'а и иметь стиль 'boxCheckbox'
  4.     if (elem.className=='boxCheckbox' &&
  5.         elem.parentNode.tagName.toLowerCase()=='div') {
  6.         // Поменять стиль "обертки" в зависимости от состояния переключателя
  7.         elem.parentNode.className='box'+(elem.checked?'Checked':'Unchecked');
  8.     }
  9. }
Вот такой простой, но эффективный метод стилизации. Готовый пример можно посмотреть на сайте. Способ кроссбраузерный, протестирован и прекрасно работает в браузерах Firefox, Internet Explorer, Chrome и Opera, а также совместимых с ними.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 18419 | Комментариев: 14

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Valery (25.08.2014 в 11:12):
Интересеный пример с использованием чекбоксов [del]
ManHunter (05.09.2011 в 10:53):
Можно
document.getElementById('элемент').onclick = function(e) { ... }
vetal (05.09.2011 в 10:47):
Подскажите, можно ли убрать из тега input вызов обработчика onclick="doCheckbox(this);", перенесением его в тело скрипта?
Gala (12.08.2011 в 15:04):
:)
ManHunter (12.08.2011 в 15:02):
Пусть M$ сперва свое кривоподелие доведут хотя бы до рабочего состояния, потом я буду дорабатывать под него скрипты.
Gala (12.08.2011 в 14:57):
странно, тестировала через ietester, в 6 чекбоксы не отобразились, а в 9 - стандартные отобразились вместо стилизованных

сорри в 6-ом отобразилось, а вот в 9-ом только стандартные
ManHunter (12.08.2011 в 14:40):
В IE6, и даже в IE5.5 все прекрасно работает.
Gala (12.08.2011 в 14:38):
Спасибо за статью, но ие, как всегда...(, в 6 и 9 не работает.
Дура (11.05.2011 в 22:02):
Роман, ты дура!
Александр (02.09.2010 в 13:38):
Да, решение очевидное! Спасибо за статьи, много вкусного и интересного почерпнул.
ManHunter (02.09.2010 в 10:49):
Для таких эстетов можно добавить еще третью картинку с затенением и обработчик события onmousedown ;)
Александр (02.09.2010 в 10:47):
Бросается в глаза одно отличие: стандартный чекбокс при
onMouseDown затеняется перед изменением значения.
ManHunter (12.08.2010 в 11:15):
Читать умеем? "Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания." Ссылка на рабочий пример дана.
Роман (12.08.2010 в 11:14):
У меня не работает :(.
А как это в работе скрипта участвует только одна иконка (checkbox.gif), а как же 2-я (для нажатого состояния)?

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.13 сек. / MySQL: 2 (0.0058 сек.) / Память: 4.75 Mb
Наверх