Advanced Form Styling
Advanced form styling
In this article, we will see what can be done with CSS to style the types of form control that are more difficult to style - the "bad" and "ugly" categories. As we saw in the previous article, text fields and buttons are perfectly easy to style; now we will dig into styling the more problematic bits.
| Prerequisites: | Basic computer literacy, and a basic understanding of HTML and CSS. |
|---|---|
| Objective: | To understand what parts of forms are hard to style, and why; to learn what can be done to customize them. |
To recap what we said in the previous article, we have:
The bad: Some elements are more difficult to style, requiring more complex CSS or some more specific tricks:
- Checkboxes and radio buttons
<input type="search">
The ugly: Some elements can't be styled thoroughly using CSS. These include:
- Elements involved in creating dropdown widgets, including
<select>,<option>,<optgroup>and<datalist>. <input type="color">- Date-related controls such as
<input type="datetime-local"> <input type="range"><input type="file"><progress>and<meter>
Let's first talk about the appearance property, which is pretty useful for making all of the above more stylable.
Source: Mozilla, https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.