Form element <input type="text"> and CSS
Form element <input type="text" ... />, sometimes for short called textbox, is the most often used element in forms. Textbox is used for short text (one line) input like names, titles, numbers, dates etc. Mastery of textbox by means of CSS is not trivial, but in comparison with other form elements is perhaps the simplest.
This is not complete tutorial of styling element textbox, but more like examples how to prepare element so that was usable in compact forms. Following code was used for obtaining of form element screenshots in particular browsers.
<input type="text" name="txt1" size="10" value="textBox" />
.error {width: 100px; margin:0; padding: 0; color: #f00; text-align: right;}
.okNow {width: 100px; height: 18px; margin:0; padding: 0 1px 0 0;
border: 1px solid #66f; float: left;}
.backg {width: 100px; height: 18px; margin:0; padding: 0 1px 0 0;
background: #ffa;}
.strip {width: 99px; height: 16px; margin:0; padding: 0 1px 0 0; border: 0;
background: #ffa; float: left;}
Commentary explains each row of screenshots.
For default display of element textBox, the width is set-up by help of attribute size="10". Results differ in dimensions IE7, IE6 95x24, FireFox 95x22, Opera 86x22 including extra margin, Safari 82x25 pixels. Attribut size is not usable for cross browser solution.
Next row points out to disapearing text cursor bug in browsers IE and Opera. When text align is set-up to the right side, or when input text is longer than the width of element, text cursor at the right margin of element disappears. This is caused by setting padding: 0;. Solution is setting padding: 0 1px 0 0; which creates enough space for text cursor. Therefore be carefull when using CSS reset for form elements.
Another visible issue in the first and in the second row of screenshots is blank 1px space above and below element in browser IE. It is possible to remove blank space by setting property float: left;.
In the third row of screenshots problems are corrected. All browsers render identically sized element dimensions 103x20px, 1px blue border and text cursor remains visible. In screenshots cursor do not blink, but is visible in all browsers. Total width of element is calculated as follows: 100px (element width) + 1px (padding) + 2*1px (border) = 103 pixels.
Now background color is set-up. This property switch-over the appearance of element to shape known from Win2000. Comformity is sufficient, except for the void space around element in Safari and IE. We already know, that vertical void space is removable by setting property float: left;. In case of Safari it helps only partly. Horizontal void space stays there and is shifted to the right side.
Final result is stripped element textBox, identical in all tested browsers. Uniform size in the last row of screenshots is 100x16 pixel and text cursor remains visible regardless of text alignment. It is possible to insert such an element into container, which may be styled according to needs and imaginings.
Live example of the last modified element <input type="text" ... /> you can find in article form resume.
Atributes of element <input type="text" ... />
<input type="text" name="..." value="..." size="10" maxlength="20" />
type="text" is mandatory atribute for this type of form element.
name="..." is mandatory attribute and have to be implemented as unique identifier. The same identifier is usually used for optional attribute id="...". Missing attribute name cause that content of that element is not submitted.
value="..." this attribute defines initial content of textBox, for example data from database. All input data are treated as string, including numbers. If length of text in value is longer than specified attribute maxlength, FireFox and Safari display only granted number of characters, IE and Opera display all characters, but text can only be deleted until specified of the number of characters is reached.
size="10" attribute size is a way how to set the width of this form element. According to screenshots this is not cross browser solution how to unify the width of element. Calculation of the width from size is based on so-called average charwidth, but this term is not exactly defined. Preferable is to use corresponding CSS properties.
maxlength="20" by this attribute maximum number of input characters in element can be limited. After maximum length achievement is reached, already it is impossible put in next characters, but it is not indicated by any way.
Another optional attribute is disabled="disabled". Input text is grayed and content of such an element is not submitted to server.
Optional attribute readonly="readonly" prevents to edit element content. This state is not indicated in any visual way and element content is submitted to server.
updated 22.12.2007