В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.
<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>
Для фона отмеченного и неотмеченного checkbox'а используется одно и то же цельное изображение, только оно сдвинуто по вертикали для различных положений. Это позволяет менять фон без дополнительной загрузки новых изображений и связанного с этим неприятного моргания. Кроссбраузерный стиль checkbox'а устанавливает для него полную прозрачность. К сожалению, специфические определения стиля типа -moz-opacity, -khtml-opacity и filter не соответствуют спецификации CSS, поэтому, если вы хотите добиться полного прохождения валидатора, то придется извернуться с 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);
}
Осталось сделать HTML-разметку и добавить обработчики кликов на прозрачные checkbox'ы. Как мы говорили в самом начале, элементы ввода помещены внутри "обертки":
<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>
После загрузки страницы надо привести состояние "оберток" в соответствие с состоянием вложенных в них checkbox'ов. Это позволит не заморачиваться с прописыванием стилей в HTML, а также будет корректно отрабатывать состояние при ручном обновлении страницы через F5.
// Установка стилей в соответствии с текущим состоянием чекбоксов
// на странице
var el=document.getElementsByTagName('input');
for (var i=0; i<el.length; i++) {
if (el[i].type.toLowerCase()=='checkbox') {
doCheckbox(el[i]);
}
}
Остался последний штрих - собственно сам обработчик. У меня подразумевается, что "обертка" сделана тегом div, а названия классов стилей такие, как описано в начале статьи. В случае необходимости вы можете подкорректировать их под свои нужды.
// Обработка состояния чекбокса
function doCheckbox(elem) {
// Чекбокс должен быть внутри DIV'а и иметь стиль 'boxCheckbox'
if (elem.className=='boxCheckbox' &&
elem.parentNode.tagName.toLowerCase()=='div') {
// Поменять стиль "обертки" в зависимости от состояния переключателя
elem.parentNode.className='box'+(elem.checked?'Checked':'Unchecked');
}
}
Вот такой простой, но эффективный метод стилизации.