Tuning rubber text field

I think that many designers (and not only) had to impose text fields (<input type = "text" />), giving them arbitrary sizes. But how to make this element rubber and satisfy the conditions:

1. The ability to set any horizontal and vertical indents of the text;
2. The element must occupy the entire container in which it is placed;
3. A mouse click anywhere in the text field sets the cursor in it.

The answer is quite simple and is solved by the following method:

First of all, you need to understand what happens to the input-element when setting its width to 100% and adding indents to the text to the left and right.

According to CSS standards (and in this case they are supported by all browsers), the resulting width of the input element, with no borders ( border ) and external indents margins will be equal to:



width = width + padding-left + padding-right



Those. it will be larger by the amount of internal horizontal indents, and the resulting element will stand for the area reserved for it.

To the total width was equal to 100%, you can use a system of two containers:

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

Each container fulfills its role:

1. input-width - this container sets the resulting width of the text field;
2. width-setter - this container sets the width of the input element minus the horizontal inner padding.

Here is a set of styles that will clarify this design:

')

	 .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;
	 }
		

Example 1



From styles, it turns out that the input-width element specifies the width that the text field should occupy. The width-setter element sets the width of the input element smaller by horizontal inner paddings. It's worth noting that its external indents margins should be equal to padding-left and padding-right for the input element.

With this description, the input element will protrude from the width-setter by the amount of its horizontal padding , and in IE6 it will stretch all the “parents” to fit its own dimensions ( Example 1 ). Also in IE6-7 browsers, the input element has indents that cannot be removed by zeroing the margin property. To change this location, you need to move the text field to the left, to the size of the left indent ( padding-left ). This can be done through position: relative, but in IE6 it will remain stretched to fit the width of the text field input width-setter container. To eliminate stretching, it is necessary to do so that the element could not affect the size of its parent, by setting, for example, position: absolute .

We describe in a new way the initial set of containers:

	 .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;
	 } 

Example 2



As a result, when applying such styles, the tasks set at the beginning are performed. The text field turned out to be given rubber and clickable indentation in any place.

To set a specific width for the resulting element, you only need to set the width property for the input-width container.



Note The above method for implementing a rubber text field is tested on Doctype: HTML 4.01, XHTML 1.0 and HTML (HTML 5) - and has cross-browser compatibility: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. In the absence of Doctype, the cross-browser operability of the method is not guaranteed.