Стилизация checkbox с использованием CSS и JavaScript
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- /* Стиль для обертки отмеченного checkbox'а */
- div.boxChecked {
- background: url("checkbox.gif") no-repeat 0 3px;
- }
- /* Стиль для обертки неотмеченного checkbox'а */
- div.boxUnchecked {
- background: url("checkbox.gif") no-repeat 0 -18px;
- }
- /* Прозрачный стиль для checkbox'а */
- div.boxChecked input, div.boxUnchecked input {
- cursor: pointer;
- margin: 0px;
- padding: 0px;
- width: 16px;
- opacity: 0;
- -moz-opacity: 0;
- -khtml-opacity: 0;
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
- }
- </style>
Code (JavaScript) : Убрать нумерацию
- // Корректировка стилей под разные браузеры
- var css=document.styleSheets[0];
- try {
- // Попробуем добавить стиль для IE
- css.addRule('.boxCheckbox',
- 'filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);');
- }
- catch(e) {
- // Добавить стиль для движков Gecko и WebKit
- css.insertRule('.boxCheckbox { -moz-opacity: 0; -khtml-opacity: 0; }',
- css.cssRules.length);
- }
Code (HTML) : Убрать нумерацию
- <div>
- <input class="boxCheckbox" type="checkbox" id="chk1" onclick="doCheckbox(this);"
- checked="checked"> - <label for="chk1">стилизованный checkbox 1</label>
- </div>
- <div>
- <input class="boxCheckbox" type="checkbox" id="chk2" onclick="doCheckbox(this);">
- - <label for="chk2">стилизованный checkbox 2</label>
- </div>
Code (JavaScript) : Убрать нумерацию
- // Установка стилей в соответствии с текущим состоянием чекбоксов
- // на странице
- var el=document.getElementsByTagName('input');
- for (var i=0; i<el.length; i++) {
- if (el[i].type.toLowerCase()=='checkbox') {
- doCheckbox(el[i]);
- }
- }
Code (JavaScript) : Убрать нумерацию
- // Обработка состояния чекбокса
- function doCheckbox(elem) {
- // Чекбокс должен быть внутри DIV'а и иметь стиль 'boxCheckbox'
- if (elem.className=='boxCheckbox' &&
- elem.parentNode.tagName.toLowerCase()=='div') {
- // Поменять стиль "обертки" в зависимости от состояния переключателя
- elem.parentNode.className='box'+(elem.checked?'Checked':'Unchecked');
- }
- }
Просмотров: 20883 | Комментариев: 14
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Valery
(25.08.2014 в 11:12):
Интересеный пример с использованием чекбоксов [del]
ManHunter
(05.09.2011 в 10:53):
Можно
document.getElementById('элемент').onclick = function(e) { ... }
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-ом только стандартные
сорри в 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 затеняется перед изменением значения.
onMouseDown затеняется перед изменением значения.
ManHunter
(12.08.2010 в 11:15):
Читать умеем? "Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания." Ссылка на рабочий пример дана.
Роман
(12.08.2010 в 11:14):
У меня не работает :(.
А как это в работе скрипта участвует только одна иконка (checkbox.gif), а как же 2-я (для нажатого состояния)?
А как это в работе скрипта участвует только одна иконка (checkbox.gif), а как же 2-я (для нажатого состояния)?
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 36,222 раза
Поблагодарили 36,222 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |