Ширина выпадающего списка (select)

sergiyko · November 1, 2011

Здравствуйте. Как-то раньше не замечал это или не обращал внимание. Теперь заметил, что select по ширине меньше input`ов, хотя в стилях указана одна ширина для них.

Предположим такой стиль возьмем

input, select {width: 300px; padding: 3px; border: 1px solid #ccc;}

Ширина input будет 300+1*2+3*2=308 пикселей. А на select это получается не распространяется? Для select нужно указать ширину 308 пикселей, чтобы он стал одной ширины с input. Почему так происходит?

Switch74 · November 1, 2011

хмм.. странно. В каком браузерере смотрите?

sergiyko · November 1, 2011

Я смотрел в Firefox и IE. Нужно указать доктайп. У меня <!DOCTYPE html>

Вот пример сделал

<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
	</head>

	<body>
    	<style type="text/css">
    	input, select {width: 300px; padding: 3px; border: 1px solid #ccc;}
    	</style>

    	<form>
    		<input name="text" type="text" />
    		<br /><br />
    		<select name="sel">
				<option value="1">Value 1</option>
				<option value="2">Value 2</option>
			</select>
    	</form>
	</body>
</html>

Проверил в Firefox, IE, Chrome.

Edited November 1, 2011 by sergiyko

psywalker · November 1, 2011

Здравствуйте. Как-то раньше не замечал это или не обращал внимание. Теперь заметил, что select по ширине меньше input`ов, хотя в стилях указана одна ширина для них.
Предположим такой стиль возьмем
input, select {width: 300px; padding: 3px; border: 1px solid #ccc;}
Ширина input будет 300+1*2+3*2=308 пикселей. А на select это получается не распространяется? Для select нужно указать ширину 308 пикселей, чтобы он стал одной ширины с input. Почему так происходит?

Вот чтобы таких вещей не происходило, я всегда делаю железную обёртку, которой и задаю ширину, а поля внутри уже растягиваю на 100% и они у меня везде красивенькие и абсолютно одинаковые.

Switch74 · November 1, 2011

Я смотрел в Firefox и IE. Нужно указать доктайп. У меня <!DOCTYPE html>

при использовании <!DOCTYPE html> <select> не имеет padding-left и padding-right

и вообще считаю использование HTML5 пока не рациональным в виду малой поддержкой браузерами.

Edited November 1, 2011 by Switch74

Nekromancer · November 1, 2011

Малой поддержки это жизни старых ИЕ? Ну так давайте ещё года 2-3 тупить с глядеть в прошлое. В то время когда многие уже скоро второй год будут использовать новый доктайп.

sergiyko · November 1, 2011

Вот чтобы таких вещей не происходило, я всегда делаю железную обёртку, которой и задаю ширину, а поля внутри уже растягиваю на 100% и они у меня везде красивенькие и абсолютно одинаковые.

А как так сделать? Я попробовал

<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
	</head>

	<body>
		<style type="text/css">
		div#wrap {width: 300px;}
		input, select {width: 100%; padding: 3px; border: 1px solid #ccc;}
		</style>

		<form>
			<div id="wrap">
				<input name="text" type="text" />
				<br /><br />
				<select name="sel">
					<option value="1">Value 1</option>
					<option value="2">Value 2</option>
				</select>
			</div>
		</form>
	</body>
</html>

select влазит в 300 пикселей, а input вылазит на 8 пикселей из блока и получается больше всеравно. Вы не подскажите как правильно сделать?

при использовании <!DOCTYPE html> <select> не имеет padding-left и padding-right
и вообще считаю использование HTML5 пока не рациональным в виду малой поддержкой браузерами.

Как это не имеет. Видно же, что есть внутренний отступ. Я пробовал другой доктайп - тоже самое.

Switch74 · November 1, 2011

Малой поддержки это жизни старых ИЕ? Ну так давайте ещё года 2-3 тупить с глядеть в прошлое. В то время когда многие уже скоро второй год будут использовать новый доктайп.

Я просто высказал своё мнение о HTML5. Я работаю в сфере WEB и большинство клиентов хотят видеть свой сайт во всех браузерах и желательно одинаковым. Делать по 3-4 копии сайта мне как-то не хочется, по этому я ищу кроссбраузерные решения, пусть они не всегда идеальны, но работают везде.

Как правило мне приходиться поддерживать последние две версии браузеров, а с ИЕ так даже и 7 иногда просят.

Пример нескольких тегов HTML5:

<video> - все браузеры нормально его поддерживают, но есть одно но, чуть ли не для каждого нужен свой формат видео - это явно не рационально держать несколько копий иногда не маленьких файлов, а если они ещё и в разном качестве будут? Тут к сожалению от flash никуда не деться.

<output> - ради одной оперы вставлять данный тег считаю бессмысленно. (подобными тегами HTML5 просто кишит, и среди них есть очень даже интересные которые я бы стал использовать - новые типы для input).

<command> - а это просто шикарный тег...

Edited November 2, 2011 by Switch74

Nekromancer · November 1, 2011

Никто не заставляет вас использовать ещё не полностью поддерживаемые теги. Но уже есть достаточно плюсов которые можно вполне кроссбраузерно использовать.

Имхо конечно, но один короткий доктайп это то, за что стоит перейти на HTML5. Тьфу, никуда переходить не надо. Вы уже на нём.

Switch74 · November 1, 2011

Никто не заставляет вас использовать ещё не полностью поддерживаемые теги. Но уже есть достаточно плюсов которые можно вполне кроссбраузерно использовать.
Имхо конечно, но один короткий доктайп это то, за что стоит перейти на HTML5. Тьфу, никуда переходить не надо. Вы уже на нём.

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

В данном случае мы обсуждаем input и select, по этому по ним и скажу:

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

select - это просто не до объект

1. в разных браузерах присутствуют разные ограничения на его стилизацию

2. не поддаётся выравниванию по z-index (обычными способами)

3. много мелких недочётов по его работе и функциональности

реально костыльный объект.

его аналог это бегунки в любом браузере.

кста, как правило заказчик придумывает такое, что стандартными средствами не сделать.

Edited November 2, 2011 by Switch74

psywalker · November 2, 2011

sergiyko,

Вот как нужно делать и всё везде будет ровно.

<!DOCTYPE html>
<html>
        <head>
                <title>Test</title>
        </head>

        <body>
                <style type="text/css">
                div#wrap {width: 294px;overflow: hidden;}
                input, select { width: 100%; padding: 0; margin: 0;border: none;}
				div.case {  overflow: hidden; border: 1px solid #000; }
                </style>

                <form>
                        <div id="wrap">

                                <div class="case"><input name="text" type="text" /></div>
                                <br /><br />
                               <div class="case"> <select name="sel">
                                        <option value="1">Value 1</option>
                                        <option value="2">Value 2</option>
                                </select></div>
                        </div>
                </form>
        </body>
</html>

Sign In

Ширина выпадающего списка (select)

Question

Link to comment

Share on other sites

10 answers to this question

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

Join the conversation

Обсуждения

Important Information