Как сделать input(text) и select в IE визуально одинаковыми?

thekap · February 15, 2011

Сабж. Собственно, проблема такая, если селекту и инпуту с типом текст задать одинаковую ширину, например, 100px, то в FF и Opera они выглядят визуально идентичными, а в IE6 инпут нехило лезет вправо (на пикселей 5, не меньше, если не больше)! Кто-то решал уже такую проблему?

LeD4eG · February 15, 2011

я в этих вопросах мало ещё сведущ, ну а что, если попробовать эти непослушные селект и инпут засунуть в таблицу?хотя моя мысль может оказаться бредовой.

thekap · February 16, 2011

С помощью таблиц я пробовал, но эффект тот же. Пока остановился на хаке для ie через импотэнт.

Great Rash · February 16, 2011

Дело в том, что к ширине инпута плюсуется его бордер и паддинг. Чтобы поборость эту проблему надо оформить инпут так:

HTML

<span class="input">
	<input type="text" id="test" name="test" value="test" />
</span>

CSS

.input {
	display: inline-block; /* Инпут - это инлайн-блок */
	width: 94px; /* Тут задаем ширину инпута */
	padding: 3px; /* Эмулируем отступ */
	border: #69c 1px solid; /* Эмулируем бордер */
	background: #fff; /* Эмулируем бекграунд */
}

.input input {
	width: 100%; /* Растягиваем инпут на ширину контейнера */
	padding: 0; /* Обнуляем отступ */
	border: 0; /* Обнуляем бордер */
	background: none; /* Убираем бекграунд */
}

psywalker · February 16, 2011

Вот ещё такой вариантик интересный.

<!DOCTYPE html>
 <html>
   <head>
<title>Input width</title>
	<style>
		body {
			background: #fff;
			}
		input {
		   -webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		   -ms-box-sizing: border-box;
			box-sizing: border-box;
			width: 100%;
			}
		.width-wrapper {
			width: 50%;
			}
	</style>

	<!--[if lt IE 8]>
	<style>
		.input-wrapper {
			padding-right: 6px;
			}
	</style>
	<![endif]-->
   </head>
   <body>
<div class="width-wrapper">
	<div class="input-wrapper">
		<input>
	</div>

</div>

<div style="width: 50%; height: 1.2em; background: #f99;"></div>
  </body>
  </html>

Vlad · February 16, 2011

Задам свой традиционный вопрос — какой доктайп стоит?

psywalker · February 16, 2011

Задам свой традиционный вопрос — какой доктайп стоит?

Ой, кстати да, даже не заметил. Дело в том, что эта идея принадлежит не мне, мне просто понравилась эта идея rash-a. А на доктайп как то внимание даже не обращал. Сейчас исправлю.

Vlad · February 16, 2011

Вопрос по доктайпу был к СТ.

psywalker · February 16, 2011

Вопрос по доктайпу был к СТ.

Ааа, блиин)))

runet · February 16, 2011

Дело в том, что к ширине инпута плюсуется его бордер и паддинг. Чтобы поборость эту проблему надо оформить инпут так:

HTML

<span class="input">
	<input type="text" id="test" name="test" value="test" />
</span>

CSS

.input {
	display: inline-block; /* Инпут - это инлайн-блок */
	width: 94px; /* Тут задаем ширину инпута */
	padding: 3px; /* Эмулируем отступ */
	border: #69c 1px solid; /* Эмулируем бордер */
	background: #fff; /* Эмулируем бекграунд */
}

.input input {
	width: 100%; /* Растягиваем инпут на ширину контейнера */
	padding: 0; /* Обнуляем отступ */
	border: 0; /* Обнуляем бордер */
	background: none; /* Убираем бекграунд */
}

А почему нельзя присвоить значения непосредственно тегу input. Ведь результат будет один и тот. Я увидел разницу только в том что в данном варианте при наполнении input`а есть левый отступ.

Great Rash · February 16, 2011

Во-первых, в разных браузерах <input> ведет себя по разному. Если в одном внутренний отступ прибавляется к ширине, то в другом он игнорируется.

Во-вторых, таким методом легче реализовать "резиновый" <input> (с шириной 100%) (для этого надо вместо display: inline-block; написать display: block;)

psywalker · February 16, 2011

Во-первых, в разных браузерах <input> ведет себя по разному. Если в одном внутренний отступ прибавляется к ширине, то в другом он игнорируется.
Во-вторых, таким методом легче реализовать "резиновый" <input> (с шириной 100%) (для этого надо вместо display: inline-block; написать display: block;)

Да, но смотри. Ведь если сделать спан блочным, то как можно сделать импут например 100% ширины, на весь экран? Ведь всё равно будут мешать границы, отступы и т. д?

Great Rash · February 16, 2011

Что где будет мешать? Ты когда диву задаешь паддинг 20 пикселей тебе они мешают?

runet · February 16, 2011

Во-первых, в разных браузерах <input> ведет себя по разному. Если в одном внутренний отступ прибавляется к ширине, то в другом он игнорируется.
Во-вторых, таким методом легче реализовать "резиновый" <input> (с шириной 100%) (для этого надо вместо display: inline-block; написать display: block;)

Под прибавлением внутреннего отступа к ширине это в IE6 имеешь ввиду. Ведь насколько я знаю он использует нестандартную блочную модель.

Когда я использовал данный вариант, то в IЕ6 отступы удваиваются и высота input`a тоже. Как с этим быть?

UPD: смотрел в IETester

Edited February 16, 2011 by runet

psywalker · February 16, 2011

Что где будет мешать? Ты когда диву задаешь паддинг 20 пикселей тебе они мешают?

Точно. Спасибо. Изначально не то подумал.

Под прибавлением внутреннего отступа к ширине это в IE6 имеешь ввиду. Ведь насколько я знаю он использует нестандартную блочную модель.
Когда я использовал данный вариант, то в IЕ6 отступы удваиваются и высота input`a тоже. Как с этим быть?
UPD: смотрел в IETester

Какой отступ? Зачем ты его добавляешь и куда?

Всё добавляется обёртке.

runet · February 16, 2011

Вот здесь смотри.

Edited February 16, 2011 by runet

psywalker · February 16, 2011

Вот здесь смотри.

Я же тебе сказал, не применяй стили к импуту вообще. Только полное обнуление.

Покажи мне страницу с примером и объясни, где косяк.

runet · February 16, 2011

Вот ссылка - http://test-platform.ucoz.ua/test.html

Если смотреть в разных браузерах, кроме IE, то высота у всех одна.

Но в IE она больше.

OPD: ИМХО Даже не высота, а скорей всего в IE прибавляется верхний padding.

Edited February 16, 2011 by runet

psywalker · February 16, 2011

Сделай вот так значит

.input {

	padding: 0 3px;

}

runet · February 16, 2011

Ничего не помогло.

Я только новичок, но мне интересно почему нельзя применять стили для input ?

Edited February 16, 2011 by runet

psywalker · February 16, 2011

Ничего не помогло.

Не может быть, давай ссылку

runet · February 16, 2011

Ссылка та же - http://test-platform.ucoz.ua/test.html

psywalker · February 16, 2011

Ссылка та же - http://test-platform.ucoz.ua/test.html

Ты поставил отдельно для ИЕ. А ты поставь для всех. И везде будет одинаково БЕЗ отступов.

.input {
	display: inline-block; /* Инпут - это инлайн-блок */
	width: 94px; /* Тут задаем ширину инпута */
	padding: 0 3px; /* Эмулируем отступ */
	border: #69c 1px solid; /* Эмулируем бордер */
	background: #fff; /* Эмулируем бекграунд */
}

runet · February 16, 2011

Понял ща попробую.

Не а все равно есть этот отступ.

http://test-platform.ucoz.ua/test1.html

Может я не так чёт делаю.

Edited February 16, 2011 by runet

psywalker · February 16, 2011

Проверь мой код

<!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>Меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

.input {
	display: inline-block; /* Инпут - это инлайн-блок */
	width: 94px; /* Тут задаем ширину инпута */
	padding: 0 3px; /* Эмулируем отступ */
	border: #69c 1px solid; /* Эмулируем бордер */
	background: #fff; /* Эмулируем бекграунд */
}
* html .input { padding: 0 3px;}
.input input {
	width: 100%; /* Растягиваем инпут на ширину контейнера */
	padding: 0; /* Обнуляем отступ */
	border: 0; /* Обнуляем бордер */
	background: none; /* Убираем бекграунд */
}
</style>
</head>
<body>


<span class="input">
	<input type="text" id="test" name="test" value="test" />
</span>

<script type="text/javascript">

</script>
</body>
</html>

runet · February 16, 2011

Всё я понял свою ошибку.

То есть мы просто переопределили эти 3px для всех браузеров.

Кстати psywalker большое спасибо за разъяснения.

Edited February 16, 2011 by runet

Sign In

Как сделать input(text) и select в IE визуально одинаковыми?

Question

Link to comment

Share on other sites

25 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

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

Join the conversation

Обсуждения

Important Information