Search
Write a publication
Pull to refresh

Верстка резинового текстового поля (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 кроссбраузерная работоспособность метода не гарантирована.

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.