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:

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 {
  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);
}

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

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"], and textarea).
• The textbox input[placeholder] attribute selector and the textarea textarea[placeholder] attribute selector. The textbox input[placeholder] selector and the textarea textarea[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 textbox input 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

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:

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;
  color: rgb(0,0,0);
}
::webkit-input-placeholder {
  color: rgb(169,169,169);
}

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;
  color: rgb(0,0,0);
}
::webkit-input-placeholder {
  color: rgb(169,169,169);
}

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:

1. Download the following source files to the same drive or folder on your computer:
   • style_textboxes_textareas.html (learnwebcoding.com)
   • style_textboxes_textareas.css (learnwebcoding.com)
2. 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 the type="text" attribute. The label element is a commonly used optional element and the size, maxlength, and placeholder attributes are commonly used optional attributes. If the textbox data is to be sent when a form is submitted, use the name attribute and assign it a unique value. To specify default/pre-entered text (i.e., a default value), use the value attribute and assign it the default/pre-entered text.
• Textareas use the textarea element. The label element is a commonly used optional element and the cols, rows, and placeholder attributes are commonly used optional attributes. If the textarea data is to be sent when a form is submitted, use the name 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 the font-family style for the textbox/textarea text content to be the same as the web page text content.
  The font-family style for the web page text content typically comes from the author body style rule. In this example, there is no author body style rule. Therefore, in this example, the font-family style for the web page text content comes from the user agent styles, which is typically body { font-family: "times new roman"; }.
• Line 3: Overrides the user agent style for the font-size property. In this example, sets the font-size style for the textbox/textarea text content to be 2/3 of a pixel (0.67px) smaller than the web page text content.
  The font-size style for the web page text content typically comes from the author body style rule. In this example, there is no author body style rule. Therefore, in this example, the font-size style for the web page text content comes from the user agent styles, which is typically body { font-size: 16px; }.
• Line 4: Overrides the user agent style for the color property. In this example, sets the color style for the textbox/textarea text content to be the same as the web page text content.
  The color style for the web page text content typically comes from the author body style rule. In this example, there is no author body style rule. Therefore, in this example, the color style for the web page text content comes from the user agent styles, which is typically body { 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 and opacity 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)