How to Style the Easy-to-Style Widgets

Challenges in styling form widgets

History

In 1995, the HTML 2 specification introduced form controls (a.k.a. "form widgets", or "form elements"). But CSS wasn't released until late 1996, and wasn't supported by most browsers until years afterward; so, in the interim, browsers relied on the underlying operating system to render form widgets.

Even with CSS available, browser vendors were reluctant at first to make form elements stylable, because users were so accustomed to the looks of their respective browsers. But things have changed, and forms widgets are now mostly stylable, with a few exceptions.

Types of widgets

Easy-to-style

1. <form>
2. <fieldset> and <legend>
3. Single-line text <input>s (e.g. type text, url, email), except for <input type="search">.
4. Multi-line <textarea>
5. Buttons (both <input> and <button>)
6. <label>
7. <output>

Harder-to-style

• Checkboxes and radio buttons
• <input type="search">

Having internals can't be styled in CSS alone

• <input type="color">
• Date-related controls such as <input type="datetime-local">
• <input type="range">
• <input type="file">
• Elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
• <progress> and <meter>

For example, the date picker calendar, and the button on <select> that displays an options list when clicked, can't be styled using CSS alone.

Note: some proprietary CSS pseudo-elements, such as ::-moz-range-track, are capable of styling such internal components, but these aren't consistent across browsers, so aren't very reliable. We will mention these later.