CSS Technique: Style Textboxes And Textareas
1. Introduction
Compared to selectboxes, checkboxes, and radio buttons, styling textboxes and textareas with CSS is rather straight forward. However, to style textboxes and textareas identically cross-browser, there are some subtle cross-browser differences to take into consideration.
Concerning HTML, textboxes use the input
element with the type="text"
attribute and textareas use the textarea
element. The textbox input
element, the textbox input
element with the type="text"
attribute, and the textarea textarea
element are referred to as the textbox/textarea elements. Concerning CSS, the selectors for textboxes are the input
type selector and, with more specificity, the input[type="text"]
attribute selector, and the selector for textareas is the textarea
type selector. The textbox input
selector, the textbox input[type="text"]
selector, and the textarea textarea
selector are referred to as the textbox/textarea selectors.
1.1. User Agent Styles For The font-family
, font-size
, And color
Properties On Textboxes And Textareas
The styles for the font-family
, font-size
, and color
properties (and others) on textboxes and textareas are not inherited from the author body
style rule. Instead, they come from the user agent styles. The user agent styles for the font-family
, font-size
, and color
properties on textboxes and textareas:
Textbox / Textarea | IE11 (1) | ED13 (2) | FF47 | CH51 |
---|---|---|---|---|
Textbox |
font-family: arial; font-size: 13.33px; color: rgba(33,33,33); |
font-family: arial; font-size: 13.33px; color: rgba(33,33,33); |
input { font-family: "ms shell dlg"; font-size: 13.3333px; color: rgb(0,0,0); } |
input { font-family: arial; font-size: 13.3333px; color: rgb(0,0,0); } |
Textarea |
textarea { font-family: "courier new"; font-size: 13.33px; color: rgba(33,33,33); } |
textarea { font-family: "courier new"; font-size: 13.33px; color: rgba(33,33,33); } |
textarea { font-family: "courier new"; font-size: 13px; color: rgb(0,0,0); } |
textarea { font-family: consolas; font-size: 13.3333px; color: rgb(0,0,0); } |
(1) (2) The IE and ED DOM explorers list the user agent styles, not the user agent selectors. As there are two possible selectors for textboxes (input and input[type="text"] ), the IE and ED user agent selector for textbox styles cannot be determined. As there is only one possible selector for textareas (textarea ), the IE and ED user agent selector for textarea styles is textarea .
|
The user agent styles for the font-family
, font-size
, and color
properties on textboxes and textareas are different cross-browser. Therefore, to style textboxes and textareas identically cross-browser, it is necessary to style the font-family
, font-size
, and color
properties of the textbox/textarea selectors.
1.2. The HTML placeholder
Attribute
The HTML placeholder
attribute is a commonly used optional attribute for textboxes and textareas. The textbox/textarea placeholder
attribute value is displayed in the textbox/textarea as temporary placeholder text until, depending upon the web browser, the textbox/textarea receive focus or text is entered into the textbox/textarea.
1.2.1. Web Browser Support For The HTML placeholder
Attribute On Textboxes And Textareas
Textbox / Textarea Element | IE Support | ED Support | FF Support | SF Support | CH Support | OP Support |
---|---|---|---|---|---|---|
|
IE10+ | ED12+ | FF4+ | SF3.1+ | CH2+ | OP11+ |
Textarea textarea element |
IE10+ | ED12+ | FF4+ | SF5+ | CH4+ | OP11.50+ |
Web browser support for the HTML placeholder
attribute on textboxes and textareas is different cross-browser. Therefore, to style textboxes and textareas identically cross-browser, it is necessary to keep in mind the web browser support for the HTML placeholder
attribute on textboxes and textareas.
1.3. The CSS Selectors For Styling The Placeholder Text
The following CSS selectors can be used to style the placeholder text:
- The previously described textbox/textarea selectors (
input
,input[type="text"]
, andtextarea
). - The textbox
input[placeholder]
attribute selector and the textareatextarea[placeholder]
attribute selector. The textboxinput[placeholder]
selector and the textareatextarea[placeholder]
selector are referred to as the textbox/textarea placeholder attribute selectors. The textbox/textarea placeholder attribute selectors are typically not used to style the placeholder text. - The web browser vendor prefix pseudo-class selectors (
:-ms-input-placeholder
and:-moz-placeholder
), the web browser vendor prefix pseudo-element selectors (::-ms-input-placeholder
,::-moz-placeholder
, and::-webkit-input-placeholder
), and the W3C proposed web browser vendor independent pseudo-element selector (::placeholder
). These selectors are referred to as the CSS*placeholder
selectors.
The styles of the CSS *placeholder
selectors override the styles of the textbox/textarea selectors and the textbox/textarea placeholder attribute selectors.
1.4. The CSS *placeholder
Selectors
The CSS *placeholder
selectors can be used to style the placeholder text in the following ways:
- With more specificity, appended to the textbox/textarea selectors. For example, the
::-ms-input-placeholder
selector appended to the textboxinput
selector:input::-moz-placeholder { opacity: 0.54; }
- With less specificity, as standalone selectors. For example, the
::-webkit-input-placeholder
selector as a standalone selector:::-webkit-input-placeholder { color: rgb(169,169,169); }
The*placeholder
selectors as standalone selectors are equivalent to the*placeholder
selectors appended to the universal*
selector. For example, the::-webkit-input-placeholder
selector is equivalent to the*::-webkit-input-placeholder
selector.
1.4.1. Web Browser Support For The CSS *placeholder
Selectors On Textboxes And Textareas
How Used (Appended To / As Standalone) | CSS *placeholder Selector |
IE Support | ED Support | FF Support | SF Support | CH Support | OP Support |
---|---|---|---|---|---|---|---|
|
:-ms-input-placeholder |
IE10+ | - | - | - | - | - |
::-ms-input-placeholder |
- | ED12+ | - | - | - | - | |
:-moz-placeholder |
- | - | FF4 - 18 | - | - | - | |
::-moz-placeholder |
- | - | FF19+ | - | - | - | |
::-webkit-input-placeholder |
- | ED12+ | - | SF4+ | CH2+ | OP15+ | |
::placeholder |
- | - | - | - | - | - | |
|
:-ms-input-placeholder |
IE10+ | - | - | - | - | - |
::-ms-input-placeholder |
- | ED12+ | - | - | - | - | |
:-moz-placeholder |
- | - | FF4 - 18 | - | - | - | |
::-moz-placeholder |
- | - | FF19+ | - | - | - | |
::-webkit-input-placeholder |
- | ED12+ | - | SF5+ | CH4+ | OP15+ | |
::placeholder |
- | - | - | - | - | - |
Web browser support for the CSS *placeholder
selectors on textboxes and textareas is different cross-browser. Therefore, to style the placeholder text identically cross-browser, it is necessary to keep in mind the web browser support for the CSS *placeholder
selectors on textboxes and textareas.
1.5. User Agent Styles For The font-family
, font-size
, color
, And opacity
Properties For The Placeholder Text On Textboxes And Textareas
The styles for the font-family
, font-size
, color
, and opacity
properties (and others) for the placeholder text on the textbox/textarea selectors are not inherited from the author body
style rule. Instead, they come from the user agent styles. The user agent styles for the font-family
, font-size
, color
, and opacity
properties for the placeholder text on textboxes and textareas:
Textbox / Textarea | IE11 (1) | ED13 (2) | FF47 | CH51 |
---|---|---|---|---|
Textbox |
font-family: arial; font-size: 13.33px; color: rgba(0,0,0,0.6); |
font-family: arial; font-size: 13.33px; color: rgba(0,0,0,0.6); (3) |
input { font-family: "ms shell dlg"; font-size: 13.3333px; color: rgb(0,0,0); } input::-moz-placeholder { opacity: 0.54; } |
input { font-family: arial; font-size: 13.3333px; |
Textarea |
textarea } font-family: "courier new"; font-size: 13.33px; color: rgba(0,0,0,0.6); } |
textarea { font-family: "courier new"; font-size: 13.33px; color: rgba(0,0,0,0.6); (4) } |
textarea { font-family: "courier new"; font-size: 13px; color: rgb(0,0,0); } textarea::-moz-placeholder { opacity: 0.54; } |
textarea { font-family: consolas; font-size: 13.3333px; |
(1) (2) The IE and ED DOM explorers list the user agent styles, not the user agent selectors. As there are two possible selectors for textboxes (input and input[type="text"] ), the IE and ED user agent selector for textbox styles cannot be determined. As there is only one possible selector for textareas (textarea ), the IE and ED user agent selector for textarea styles is textarea .(3) (4) The ED user agent style for the color property appears to be the same as IE, which is color: rgba(0,0,0,0.6) . However, the ED12+ DOM explorer lists the user agent style for the color property as color: rgb(33,33,33) , which is too dark, and it does not list the ::-ms-input-placeholder and ::-webkit-input-placeholder selectors, which seems odd. Therefore, instead of listing the known incorrect color: rgb(33,33,33) style, the likely correct color: rgba(0,0,0,0.6) style is listed.
|
The user agent styles for the font-family
, font-size
, color
, and opacity
properties for the placeholder text on textboxes and textareas are different cross-browser. Therefore, to style the placeholder text identically cross-browser, it is necessary to style the font-family
, font-size
, color
, and opacity
properties for the placeholder text on the textbox/textarea selectors and the CSS *placeholder
selectors.
1.6. Demonstration And CodePen
- Demonstration: CSS Technique: Style Textboxes And Textareas (learnwebcoding.com).
- CodePen: CSS Technique: Style Textboxes And Textareas (codepen.io/learnwebcoding/).
1.7. Web Browser Support
Web browser support*: IE8+, ED12+, FF1.5+, SF3.1+, CH2+, OP9+.
* Support everything except possibly the older web browsers not supporting; 1.) the CSS border-radius
property, 2.) the HTML placeholder
attribute, and 3.) the CSS *placeholder
selectors.
1.8. How To Try This Example On Your Computer
To try this example on your computer:
- Download the following source files to the same drive or folder on your computer:
- Double click the .html file.
1.9. Abbreviations
- IE = Internet Explorer.
- ED = Edge = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
- FF = Firefox.
- SF = Safari.
- CH = Chrome.
- OP = Opera.
2. Style Textboxes And Textareas
2.1. HTML Source Code And Notes
HTML source code: style_textboxes_textareas.html (learnwebcoding.com):
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>CSS Technique: Style Textboxes And Textareas</title> 5 <meta charset="UTF-8" /> 6 <link rel="stylesheet" type="text/css" href="style_textboxes_textareas.css" /> 7 </head> 8 <body> 9 <h2>CSS Technique: Style Textboxes And Textareas</h2> 10 <p>Textbox without label: <input type="text" name="unique to indicate textbox1 when form submitted" size="30" maxlength="30" /></p> 11 <p><label>Textbox with label: <input type="text" name="unique to indicate textbox2 when form submitted" size="30" maxlength="30" /></label></p> 12 <p><label>Textbox with label and placeholder text: <input type="text" name="unique to indicate textbox3 when form submitted" size="30" maxlength="30" placeholder="placeholder text" /></label></p> 13 <p><label>Textbox with label and default/pre-entered text: <input type="text" name="unique to indicate textbox4 when form submitted" size="30" maxlength="30" value="default/pre-entered text" /></label></p> 14 <p><label><input type="text" name="unique to indicate textbox5 when form submitted" size="30" maxlength="30" /> Textbox with label.</label></p> 15 <hr /> 16 <p>Textarea without label: <textarea name="unique to indicate textarea1 when form submitted" cols="30" rows="2"></textarea></p> 17 <p><label>Textarea with label: <textarea name="unique to indicate textarea2 when form submitted" cols="30" rows="2"></textarea></label></p> 18 <p><label>Textarea with label and placeholder text: <textarea name="unique to indicate textarea3 when form submitted" cols="30" rows="2" placeholder="placeholder text"></textarea></label></p> 19 <p><label>Textarea with label and default/pre-entered text: <textarea name="unique to indicate textarea4 when form submitted" cols="30" rows="2">default/pre-entered text</textarea></label></p> 20 <p><label><textarea name="unique to indicate textarea5 when form submitted" cols="30" rows="2"></textarea> Textarea with label.</label></p> 21 <p>Web browser support*: IE8+, ED12+, FF1.5+, SF3.1+, CH2+, OP9+.</p> 22 <p>* Support everything except possibly the older web browsers not supporting; 1.) the CSS <code>border-radius</code> property, 2.) the HTML <code>placeholder</code> attribute, and 3.) the CSS <code>*placeholder</code> selectors.</p> 23 </body> 24 </html>
HTML source code notes:
- Textboxes use the
input
element with thetype="text"
attribute. Thelabel
element is a commonly used optional element and thesize
,maxlength
, andplaceholder
attributes are commonly used optional attributes. If the textbox data is to be sent when a form is submitted, use thename
attribute and assign it a unique value. To specify default/pre-entered text (i.e., a default value), use thevalue
attribute and assign it the default/pre-entered text. - Textareas use the
textarea
element. Thelabel
element is a commonly used optional element and thecols
,rows
, andplaceholder
attributes are commonly used optional attributes. If the textarea data is to be sent when a form is submitted, use thename
attribute and assign it a unique value. To specify default/pre-entered text (i.e., a default value), place the default/pre-entered text between the opening and closing<textarea></textarea>
tags.
2.2. CSS Source Code And Notes
CSS source code: style_textboxes_textareas.css (learnwebcoding.com):
1 input[type="text"], textarea { 2 font-family: "times new roman"; 3 font-size: 15.33px; 4 color: #000; 5 border: 2px solid #999; 6 border-radius: 3px; 7 padding: 4px 6px; 8 } 9 textarea { 10 vertical-align: middle; 11 } 12 input[type="text"]:hover, textarea:hover { 13 border-color: #666; 14 } 15 input[type="text"]:focus, textarea:focus { 16 outline: 0; 17 border-color: #666; 18 } 19 input[type="text"]:-ms-input-placeholder, textarea:-ms-input-placeholder { 20 color: #888; 21 } 22 input[type="text"]:-moz-placeholder, textarea:-moz-placeholder { 23 color: #888; 24 } 25 input[type="text"]::-moz-placeholder, textarea::-moz-placeholder { 26 color: #888; 27 opacity: 1; 28 } 29 input[type="text"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 30 color: #888; 31 }
CSS source code notes:
- Lines 1 - 11: Styles the textboxes/textareas.
- Line 2: Overrides the user agent style for the
font-family
property. In this example, sets thefont-family
style for the textbox/textarea text content to be the same as the web page text content.Thefont-family
style for the web page text content typically comes from the authorbody
style rule. In this example, there is no authorbody
style rule. Therefore, in this example, thefont-family
style for the web page text content comes from the user agent styles, which is typicallybody { font-family: "times new roman"; }
. - Line 3: Overrides the user agent style for the
font-size
property. In this example, sets thefont-size
style for the textbox/textarea text content to be 2/3 of a pixel (0.67px) smaller than the web page text content.Thefont-size
style for the web page text content typically comes from the authorbody
style rule. In this example, there is no authorbody
style rule. Therefore, in this example, thefont-size
style for the web page text content comes from the user agent styles, which is typicallybody { font-size: 16px; }
. - Line 4: Overrides the user agent style for the
color
property. In this example, sets thecolor
style for the textbox/textarea text content to be the same as the web page text content.Thecolor
style for the web page text content typically comes from the authorbody
style rule. In this example, there is no authorbody
style rule. Therefore, in this example, thecolor
style for the web page text content comes from the user agent styles, which is typicallybody { color: #000; }
. - Lines 12 - 14: Optional. Styles the textboxes/textareas with a hover style.
- Lines 15 - 18: Optional. Styles the textboxes/textareas with a focus style and removes the blue outline that recent versions of CH applies to a textbox/textarea with focus.
- Lines 19 - 21: Styles the placeholder text
color
property for textboxes/textareas in IE10+. - Line 19: The W3C CSS Validation Service throws a warning:
:-ms-input-placeholder
is an unknown vendor extended pseudo-class. - Lines 22 - 24: Styles the placeholder text
color
property for textboxes/textareas in FF4 - 18. - Line 22: The W3C CSS Validation Service throws a warning:
:-moz-placeholder
is an unknown vendor extended pseudo-class. - Lines 25 - 28: Styles the placeholder text
color
andopacity
properties for textboxes/textareas in FF19+. - Line 25: The W3C CSS Validation Service throws a warning:
::-moz-placeholder
is an unknown vendor extended pseudo-element. - Lines 29 - 31: Styles the placeholder text
color
property for textboxes in ED12+, SF4+, CH2+, and OP15+ and for textareas in ED12+, SF5+, CH4+, and OP15+. - Line 29: The W3C CSS Validation Service throws a warning:
::-webkit-input-placeholder
is an unknown vendor extended pseudo-element.
3. Resources And Additional Information
- :-ms-input-placeholder pseudo-class (msdn.microsoft.com)
- :-moz-placeholder (developer.mozilla.org)
- ::-moz-placeholder (developer.mozilla.org)
- CSS Pseudo-Elements Module Level 4: W3C Working Draft, 7 June 2016 (w3.org)
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: W3C Recommendation 07 June 2011, Edited In Place 12 April 2016 To Point To New Work (w3.org)
- Selectors Level 3: W3C Recommendation 29 September 2011 (w3.org)
- W3C CSS Validation Service (jigsaw.w3.org)
- Using MS Shell Dlg and MS Shell Dlg 2 (msdn.microsoft.com)
- CSS Techniques (learnwebcoding.com)