Form element <input type="text"> and CSS
Form element <input type="text">, sometimes for short called textBox, is the most frequently used form element. TextBox is used for input of short text (single line) for example name, title, number, date and so on. Mastery of textBox by means of CSS is not trivial, but in comparison with other form elements is maybe the simplest.
Following live form example is completed by applied HTML a CSS code. The look is the same when strict XHTML code is used. Farther are screenshots of that form in currently used browsers. By this way you can compare form look in your actual browser version and look in others browsers. This is not entire tutorial of textBox element styling, but rather example of how to make that element usable in compact forms.
|
| input {font: normal 13px Arial, SansSerif;} <input type="text" size="7" value="textBox"> | |
|
| <input type="text" size="7" value="textBox" disabled> | |
| .tx1, .tx2, .tx3, .tx4 {width: 88px; height: 18px; margin:0; padding: 0;} | ||
|
| .tx1 {color: #f00;} | |
|
| .tx2 {padding: 0 1px 0 0; float: left; color: #00c; border: 1px solid #00c;} | |
|
| .tx3 {padding: 0 1px 0 0; float: left; background: #ffa;} | |
|
| .tx4 {padding: 0 1px 0 0; float: left; background: #ffa; border: 0;} | |
There is no Chrome beta screenshot, because of no difference between FireFox 3.0. and Chrome, except of gray nuance in border. IE6 nad IE7 render textBox identically, depending on set up Windows motive.
For default look of element textBox, the width is set up by help of attribute size="7". Outside dimmensions differ in browsers. Font used in form elements is not inherited, therefore have to be declared separately. Attribut size is not usable for cross browser pixel precision solution. Look of disabled textBox element is displayed in the second row of screenshots.
Next rows of screenshots displays styled textBox elements. "Red" elements indicate some issues. At first it is disappearing text cursor bug in browsers IE and Opera. Correct text cursor is visible in FireFox and Safari. 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 side of element disappears. This is caused by setting padding: 0; whitch is sometimes advised in so-called CSS reset. Solution is setting padding: 0 1px 0 0; which creates sufficient space for text cursor. Therefore be carefull when using CSS reset for form elements.
Another visible issue is blank 1px space above and below element in IE6 and IE7 browsers. It is possible to remove redundant space by setting property float: left;. IE8 RC1 renders this element without redundant space and property left is not neccessary. Safari screenshot illustrates active textBox, (which has focus). Chrome works the same way, only color around element is brown instead of blue.
"Green" textBox is correct yet, text cursor is always visible, element has the same dimensions in all tested browsers.
Now CSS property background is set up. This property makes to switch-over the appearance of element to shape known from Win2000. Browser specific look of such element is switched off.
Final row is stripped down element textBox, identical in all tested browsers. Uniform element dimensions are 89x18 pixels 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 your fantasy.
Live example of the last modified element <input type="text" ... > together with other form elements you can find in article form resume, element dimension calculation you can find in article form box model.
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 to server.
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.
This page is switched to standard mode, to make IE work according to W3C box model. If you experiment with form elements styling do not remember to use correct doctype in HTML or XHTML prolog.
updated 04.02.2009