Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.03.2010, 10:41
Кандидат Javascript-наук
Отправить личное сообщение для vah-smile Посмотреть профиль Найти все сообщения от vah-smile
 
Регистрация: 30.10.2009
Сообщений: 111

Свой стиль для CheckBox
ВОт у меня есть стиль для CheckBox (смотри вложеные файлы). Как мне их применить вместо CheckBox поумолчанию? Тоисть, нужно, чтобы этот стиль одинаково отображался как в FF так и IE
Изображения:
Тип файла: gif checkbox.gif (1.3 Кб, 144 просмотров)
Тип файла: gif radio.gif (1.3 Кб, 132 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 08.03.2010, 12:09
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Заменять input на div или span, у которого регулировать background-position.
Либо погуглить в поисках готовых решений.
Ответить с цитированием
  #3 (permalink)  
Старый 08.03.2010, 15:13
Аватар для Kos
Kos Kos вне форума
Аспирант
Отправить личное сообщение для Kos Посмотреть профиль Найти все сообщения от Kos
 
Регистрация: 01.09.2008
Сообщений: 79

плагинов для jquery полно, которые это делают - ищи
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2010, 01:35
Кандидат Javascript-наук
Отправить личное сообщение для vah-smile Посмотреть профиль Найти все сообщения от vah-smile
 
Регистрация: 30.10.2009
Сообщений: 111

Сообщение от Kos Посмотреть сообщение
плагинов для jquery полно, которые это делают - ищи
Да... но я хочу сам научится создавать. И мне нужна просто идея, а дальше я сам справлюсь. Просто я никак не пойму как это сделать...
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2010, 02:18
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Простейший вариант такой:
<!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, 09.03.2010 в 23:44.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2010, 17:09
Кандидат Javascript-наук
Отправить личное сообщение для vah-smile Посмотреть профиль Найти все сообщения от vah-smile
 
Регистрация: 30.10.2009
Сообщений: 111

Octane, в IE вообще checkbox не отображает!
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2010, 23:41
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

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

Последний раз редактировалось Octane, 09.03.2010 в 23:44.
Ответить с цитированием
  #8 (permalink)  
Старый 23.06.2011, 17:34
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

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>

Последний раз редактировалось BETEPAH, 23.06.2011 в 21:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как подгрузить стиль для определённой ссылки? Negative Элементы интерфейса 1 11.11.2009 15:45
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 12:31
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 13:48
Совершествуем стиль написания скриптов Mitrandir Events/DOM/Window 6 16.06.2008 08:02