Как стать автором
Поиск
Написать публикацию
Обновить

Верстка резинового текстового поля (input[type=text])

Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (/>), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить следующим условиям:


  1. Возможность установки любых горизонтальных и вертикальных отступов у текста;
  2. Элемент должен занимать весь контейнер, в который он помещен;
  3. Клик мышью в любое место текстового поля устанавливает в нем курсор.

Ответ достаточно прост и решается следующим методом:


Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.

Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов (margin), будет равна:



width = width + padding-left + padding-right


Расчет ширины

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


Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:


	<div class="input-width">
		<div class="width-setter">
			<input type="text" value="" />
		<div>
	</div>
		

Каждый контейнер выполняет свою роль:


  1. input-width – этот контейнер задает результирующую ширину текстового поля;
  2. width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.

Вот набор стилей, который разъяснит эту конструкцию:


	.input-width {
		height:23px;
		border:1px solid #999;
		background:#fff;
	}
	.width-setter {
		height:23px;
		margin:0 9px;
	}
	.width-setter input {
		width:100%;
		height:14px;
		padding:4px 9px 5px;
		margin:0;
		font-family:Tahoma, Geneva, sans-serif;
		font-size:12px;
		line-height:14px;
		color:#000;
		border:0 none;
		background:#9C6;
	}
		

Пример 1


Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы (margin) должны быть равны padding-left и padding-right для элемента input.


При таком описании input-элемент будет выступать из width-setter на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.


Опишем по-новому исходный набор контейнеров:


	.input-width {
		height:23px;
		border:1px solid #999;
		background:#fff;
	}
	.width-setter {
		height:23px;
		margin:0 9px;
		position:relative;
	}
	.width-setter input {
		width:100%;
		height:14px;
		padding:4px 9px 5px;
		margin:0;
		font-family:Tahoma, Geneva, sans-serif;
		font-size:12px;
		line-height:14px;
		color:#000;
		border:0 none;
		background:#9C6;
		position:absolute;
		left:-9px;
		top:0;
	}

Пример 2


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


Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width для контейнера input-width.


Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.

Теги:
Хабы:
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.