
Tuning a rubber text box
I think that many typesetters (and not only) had to typeset text fields (), asking them arbitrary sizes. But how to make this element rubber and satisfy the conditions:
To get started, you need to understand what happens to the input element when setting its width to 100% and adding left and right indents for the text.
According to CSS standards (and in this case all browsers support them), the resulting width of the input element, in the absence of borders ( border ) andindentationfields ( margin ), will be equal to:
width = width + the padding-left + the padding-right

Ie it will be larger by the amount of internal horizontal indents, and the resulting element will protrude beyond the area allotted for it.
So that the total width is 100%, you can use a system of two containers:
Each container performs its role:
Here is a set of styles that will clarify this design:
Example 1
From the styles it turns out that the input-width element sets the width that the text field should occupy. The width-setter element sets the width of the input element less by horizontal indentation. It is worth noting that hisindentationfield ( margin ) should be equal padding-left and padding-right for the input member.
With this description, the input element will protrude from the width-setter by the size of its horizontal padding , and in IE6 it will stretch all the “parents” to their own sizes ( example 1 ). Also in IE6-7 browsers, the input element has indents that cannot be removed by setting the margin property to zero . To change this arrangement, you need to shift the text field to the left, the size of the left indent ( padding-left ). You can do this through position: relative, but in IE6 the input container will remain stretched to fit the width of the text fieldwidth-setter . To eliminate stretching, it is necessary to make sure that the element can not affect the size of its parent by setting, for example, position: absolute .
Let us describe in a new way the initial set of containers:
Example 2
As a result, when applying such styles, the tasks set at the beginning are fulfilled. The text field turned out with the specified indentation rubber and clickable 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, cross-browser performance of the method is not guaranteed.
- Ability to set any horizontal and vertical indentation of the text;
- The element must occupy the entire container in which it is placed;
- 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:
To get started, you need to understand what happens to the input element when setting its width to 100% and adding left and right indents for the text.
According to CSS standards (and in this case all browsers support them), the resulting width of the input element, in the absence of borders ( border ) and
width = width + the padding-left + the padding-right

Ie it will be larger by the amount of internal horizontal indents, and the resulting element will protrude beyond the area allotted for it.
So that the total width is 100%, you can use a system of two containers:
Each container performs its role:
- input-width - this container sets the resulting width of the text field;
- width-setter - this container sets the width of the input element minus horizontal inner indents.
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 the styles it turns out that the input-width element sets the width that the text field should occupy. The width-setter element sets the width of the input element less by horizontal indentation. It is worth noting that his
With this description, the input element will protrude from the width-setter by the size of its horizontal padding , and in IE6 it will stretch all the “parents” to their own sizes ( example 1 ). Also in IE6-7 browsers, the input element has indents that cannot be removed by setting the margin property to zero . To change this arrangement, you need to shift the text field to the left, the size of the left indent ( padding-left ). You can do this through position: relative, but in IE6 the input container will remain stretched to fit the width of the text fieldwidth-setter . To eliminate stretching, it is necessary to make sure that the element can not affect the size of its parent by setting, for example, position: absolute .
Let us 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 fulfilled. The text field turned out with the specified indentation rubber and clickable 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, cross-browser performance of the method is not guaranteed.