Как изменить внешний вид checkbox
04.28.2009 – Рубрика: HTML&CSS
Наверняка многие знают, что такие элементы формы как select, file, checkbox, radio не поддаются стилизации средствами CSS. Но как же быть, если нерадивый дизайнер в макете дизайна нарисовал поле checkbox в форме стилизировным под общий дизайн сайт, а заказчик на отрез не хочет принимать дизайн без формы ввода данных идентичной макету дизайна.
Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0 (подробней об этом свойстве можно прочитать в заметке «Создание модульного окна с прозрачной подложкой«).
Таким образом, элемент находиться на странице, остается кликабельным, но полностью прозрачный, таким образом, невидимый. А в блоке, в котором находиться checkbox задается бекграунд с картинкой, на которой изображено, как должен выглядеть измененный checkbox и при клике на checkbox скриптом у блока меняется класс стиля, чтоб поменялся бекграунд на картинку с измененным чекбоксом в другом состоянии.
/*---------- Стили классов -----------*/
input {
margin:0;padding:0;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
background:url(f_logincheckbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
background:url(f_logincheckbox_off.png) no-repeat 0 3px;
}
/*---------- Скрипт изменения класса-----------*/
function logincheckboxCheck () {
if (document.getElementById("checkbox1").checked) {
document.getElementById("checkboxDiv").className="checkboxOn";
}
else {
document.getElementById("checkboxDiv").className="checkboxOff";
}
}
/*---------- Верстка-----------*/
<div id="checkboxDiv" class="checkboxOn">
<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" class="checkboxOn" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>
Пример полностью кроссбраузерный. Посмотреть реализация можно по ссылке Пример стилизации Chebox
В дополнение, стоит отметить что картинку чекбокса лучше делать спрайтом из двух картинок чтоб избежать эффекта мерцания при подргрузке картинки.
Геологические инженерные изыскания помогают выявить потенциально опасные моменты строительства, например, коррозийную активность к стали и бетону, что немаловажно при закладке фундамента.
19 Отзывов to “Как изменить внешний вид checkbox”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 5 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 19 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 5 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – нет отзывов)
Апрель 28, 2009 в 18:33
Спасибо за способ.
P.S. У тебя на блоге сапы кривая кодировка :Р
Апрель 28, 2009 в 22:43
В избранное
Апрель 28, 2009 в 23:21
имхо розрачность тоже js’ом ставить надо – оставить шанс посетителям с отключеным js..
Апрель 29, 2009 в 0:01
В топку юзеров с отключенным js
Апрель 29, 2009 в 0:13
в топку или нет, не важно – профи всегда найдет способ позаботиться о всех малой кровью.. это как раз тот случай..
Апрель 29, 2009 в 0:20
ну да, вспомните еще про ие5
ведь не исключено, что и его где-то юзают
Апрель 29, 2009 в 0:49
это уже просто не по теме.. если js можно заблокировать практически в любом браузере, firewall’е, проксе и т.п., (причем некоторые так делают, в офисах, напр) + разность используемых разными браузерами версий и спецификаций js + мобильные устройства – очень много «но», то ie > 6 уже просто практически никто не пользуется..
Апрель 29, 2009 в 10:52
2vdorr
Мои контакты на странице http://zodios.net/ob-avtorakh
2Bueno
Дельное замечание. Обратная совместимость конечно важна, но какой процент пользователей серфит с отключенными скриптами? К тому же, мне кажется, тот кто умышлено отключил скрипты догадывается о том что это и какие будут последствия.
Апрель 29, 2009 в 14:40
ну тут можно долго обсуждать, соглашаться, не соглашаться, считать проценты и прочее.. но думаю меньше времени займет просто вписать 2 строчки не в css, а в js и значительно улучшить совместимость.. ))
Май 11, 2009 в 0:37
Олег, сотри коммент Ausima – там ссылку этот сраный спамер припрятал.
Июнь 2, 2009 в 23:27
А что Вы скажете, еси я скажу, что все Ваши посты, не более чем выдумка?
Июнь 30, 2009 в 12:25
Что-то не получается зарегистрироваться у Вас на Блоге. Email не приходит. Проверьте пожалуйста!
Июль 23, 2009 в 21:30
Все класс конечно, но мне например понадобилось, чтобы был не один чекбокс, а три и более. Приципить скрипт ко всем чекбоксам так что бы они все работали у меня не получилось!
Может преределаете пример где чекбоксов будет несколько,а не один. Или напишите, что нужно сделать что бы это работало если на странице несколько чекбоксов.
Июль 30, 2009 в 14:05
Июль 30, 2009 в 14:09
alert(»спасибо за сатью)»);
Август 14, 2009 в 17:51
Ponravilos
Ноябрь 1, 2009 в 17:55
Спасибо большое, но не подскажете какой размер у стандартного checkbox 5х5?
Ноябрь 24, 2009 в 1:19
>>Спасибо большое, но не подскажете какой размер у стандартного checkbox 5х5?
Сделай страницу с обычным checkbox, ее скриншот и померяй
Ноябрь 24, 2009 в 13:26
Не люблю привязку к id
В этом случае можно использовать такую функцию
function checkboxCheck(el)
{
if(el.checked)
el.parentNode.className=’checkboxOn’;
else
el.parentNode.className=’checkboxOff’;
}
Запомнить меня