Javascript-форум - Свой стиль для CheckBox

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Свой стиль для CheckBox (https://javascript.ru/forum/dom-window/8106-svojj-stil-dlya-checkbox.html)

Свой стиль для CheckBox

ВОт у меня есть стиль для CheckBox (смотри вложеные файлы). Как мне их применить вместо CheckBox поумолчанию? Тоисть, нужно, чтобы этот стиль одинаково отображался как в FF так и IE

Заменять input на div или span, у которого регулировать background-position.
Либо погуглить в поисках готовых решений.

плагинов для jquery полно, которые это делают - ищи

Цитата:

Сообщение от Kos (Сообщение 47138)

плагинов для jquery полно, которые это делают - ищи

Да... но я хочу сам научится создавать. И мне нужна просто идея, а дальше я сам справлюсь. Просто я никак не пойму как это сделать...

Простейший вариант такой:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
label {
	position: relative;
	overflow: hidden;
	padding-left: 21px;
	background: url(http://javascript.ru/forum/attachments/dom-window/317d1268037500-svojj-stil-dlya-checkbox-checkbox-gif) no-repeat;
}
label:hover {
	background-position: 0 -23px;
}
label.checked {
	background-position: 0 -46px;
}
label.checked:hover {
	background-position: 0 -69px;
	background-color: #fec;
}
label input {
	position: absolute;
	left: -9999px;
}
</style>
<label><input type="checkbox" /> checkbox</label>
<script type="text/javascript">
var label = document.getElementsByTagName("label")[0];
var input = label.getElementsByTagName("input")[0];
input.onclick = function () {
	label.className = input.checked ? "checked" : "";
};
</script>
</body>
</html>

Замечания: не хватает картинок для состояния input:focus, картинка для input:checked:hover ничем не отличается от input:checked (поэтому добавил изменение цвета фона).

input можно не сдвигать, а накрыть изображением или вытолкнуть в невидимую область изображением, чтобы при отключенных картинках input можно было найти.

Фон можно менять у какого-нибудь вложенного span, чтобы пользователь мог увеличивать только размер шрифта, а не масштаб всей страницы.

В общем, переделывать инпуты — дело муторное и неблагодарное. Дизайнеру по голове за это.

Octane, в IE вообще checkbox не отображает!

Все работает. Просто attachments доступны только для зарегистрированных пользователей, авторизируйся в IE, и картинка станет видна.

Octane,
а если чекбоксов не один, а три, допустим?
Приведенный код срабатывает только на первом из них.

P.S.
Разобрался, извините.
Для трех чекбоксов код будет такой

<script type="text/javascript">
var label = document.getElementsByTagName("label")[0];
var input = label.getElementsByTagName("input")[0];
input.onclick = function () {
	label.className = input.checked ? "checked" : "";
};

var label2 = document.getElementsByTagName("label")[1];
var input2 = label2.getElementsByTagName("input")[0];
input2.onclick = function () {
	label2.className = input2.checked ? "checked" : "";
};

var label3 = document.getElementsByTagName("label")[2];
var input3 = label3.getElementsByTagName("input")[0];
input3.onclick = function () {
	label3.className = input3.checked ? "checked" : "";
};
</script>