Стилизуем select

Great Rash · June 9, 2010

И снова здравствуйте, друзья и коллеги по несчастью!

Вот выдалась свободная минутка и я спешу поделиться с вами совсем недавно (30 минут назад) найденным решением для стилизации селекта. Не секрет, что для многих это очень большая проблема, особенно когда попадается тупой заказчик и такой же дизайнер

Итак без лишних слов качаем картинку select_bg.gif и разбираемся в коде:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		.stylized_select {
			position: relative;
			overflow: hidden;
			width: 77px;
			height: 20px;
			background: url('select_bg.gif') 0 0 no-repeat;
		}

		.stylized_select select {
			position: relative;
			z-index: 2;
			width: 100%;
			-moz-opacity: 0;
			opacity: 0;
			filter: alpha(opacity=0);
		}

		.stylized_select .input_wrapper {
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			width: 53px;
			padding: 0 17px 0 7px;
		}

		.stylized_select .input_wrapper input {
			width: 100%;
			height: 20px;
			line-height: 20px;
			border: 0;
			background: none;
		}
	</style>
</head>

<body>

	<div class="stylized_select">
		<select name="domen" onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].innerHTML;">
			<option value="1">opt 1</option>
			<option value="2">opt 2</option>
			<option value="3">opt 3</option>
			<option value="4">opt 4</option>
		</select>
		<div class="input_wrapper">
			<input type="text" name="noname" value="opt 1" />
		</div>
	</div>

</body>
</html>

Проверял в:

Mozilla Firefox 3.6

Apple Safari 5.0

Opera 10

Internet Explorer 7

InternetExplorer 8

В ИЕ 6 метод не работает, но пользователь в нем увидит совершенно обыкновенный селект без каких-либо изменений. Так что метод можно считать кроссбраузерным.

Надеюсь, что с применением этого метода у вас станет одной головной болью меньше.

psywalker · June 9, 2010

Дружище, а объясни плиз вот эту строку поподробнее

this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].innerHTML;">

s0rr0w · June 9, 2010

Дружище, а объясни плиз вот эту строку поподробнее
this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].innerHTML;">

От селекта подымаемся по дереву вверх на одну ноду, потом в этом контейнере ищем элементы с именем "input", берем нулевой элемент по списку, его полю "value" присваиваем текст того опшина селекта, который на данный момент выбран.

Уточнение. Брать innerHTML у опшина жестоко. Для этого есть свойство text.

psywalker · June 9, 2010

От селекта подымаемся по дереву вверх на одну ноду, потом в этом контейнере ищем элементы с именем "input", берем нулевой элемент по списку, его полю "value" присваиваем текст того опшина селекта, который на данный момент выбран.
Уточнение. Брать innerHTML у опшина жестоко. Для этого есть свойство text.

Спасибо.

1)

Уточнение. Брать innerHTML у опшина жестоко.

Почему жестоко?

2)

Для этого есть свойство text

А что это за свойство такое?

s0rr0w · June 9, 2010

Почему жестоко?

Потому что это не очень хороший метод.

А что это за свойство такое?

Содержит текст, который написан в теге: <option>вот этот текст</option>

psywalker · June 9, 2010

Потому что это не очень хороший метод.
Содержит текст, который написан в теге: <option>вот этот текст</option>

Понял, а как именно выглядит этот метод? Название и т. д. Просто хотелось бы про него почитать.

s0rr0w · June 9, 2010

Понял, а как именно выглядит этот метод? Название и т. д. Просто хотелось бы про него почитать.

Про метод я имел в виду данный подход, когда берется именно innerHTML.

Советую попробовать сделать вот так

И выбрать его. А потом заменить innerHTML на text.

Great Rash · June 9, 2010

Ладно признаю, что с innerHTML прокололся. Но дело совсем не в этом

Great Rash · June 9, 2010

Специально для тебя psywalker:

onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].text;"

Это чтоб вопросов более не возникало

psywalker · June 9, 2010

Специально для тебя psywalker:
onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].text;"
Это чтоб вопросов более не возникало

Вот эт другой разговор, благодарю

psywalker · June 10, 2010

Кстати вопрос:

Выходит, что свойство innerHTML выцепляет весь текст, даже комментарии, а свойство .text только чисто текст?

Great Rash · June 10, 2010

Лично я не тестил, но, судя по словам s0rr0w, выходит что так. Собери тестовую страницу да посмотри, в чем проблема.

psywalker · June 10, 2010

Лично я не тестил, но, судя по словам s0rr0w, выходит что так. Собери тестовую страницу да посмотри, в чем проблема.

Давай дружище, потом отпиши сразу.

Great Rash · June 10, 2010

Чего давай, я тебе предлагал

psywalker · June 10, 2010

Чего давай, я тебе предлагал

А я проверял, вроде s0rr0w прав. Но если ты подтвердишь, то я точно буду спокоен.

Great Rash · June 10, 2010

Подтверждаю

psywalker · June 10, 2010

Подтверждаю

Уфф, ну слава богу, теперь можно жить дальше

Sign In

Стилизуем select

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information