Advanced Form Styling

Some elements, like checkboxes, radio buttons, and <input type="search"> are more difficult to style. Some other elements can not be styled thoroughly at all using CSS. Different browsers render checkboxes differently, which classifies them as an advanced style.

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
Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.