Styling form controls
Learn how to implement form controls with CSS.
In this module you learn how to style <form>
elements, and how to match your other site styles.
Help users select an option #
The <select>
element #
The default styles of a <select>
element don't look great, and the appearance is inconsistent between browsers.
First, let's change the arrows.
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto;
}
To remove the default arrows of a <select>
element, use the CSS appearance
property. To show the arrow of your choice, define the arrow as a background
.
You should also change the font-size
to at least 1rem
(which for most browsers has a default value of 16px) for your <select>
element. This prevents a page zoom on iOS Safari when a form control is focused.
You can, of course, also change the element colors to match your brand colors. After adding some more styles for spacing, :hover
, and :focus
, the appearance of the <select>
element is now consistent between browsers.
See this in the following demo from Styling a Select Like It’s 2019
What about the <option>
element? The <option>
element is a so-called replaced element whose representation is outside the scope of CSS. As of this writing, you can't style the <option>
element.
Checkboxes and Radio buttons #
The appearance of <input type="checkbox">
and <input type="radio">
varies across browsers.
Open the demo on various browsers to see the difference. Let's see how to make sure that checkboxes and radio buttons match your brand and look the same cross-browser.
You can't style <input type="checkbox">
and <input type="radio">
directly, but there is a workaround. First, hide the default checkbox and radio button visually.
input[type="radio"],
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
Use position: absolute
in combination with opacity: 0
instead of display: none
or visibility: hidden
to only hide the elements visually, and to ensure they are still present in the accessibility tree.
To show your custom checkboxes and radio buttons, you have different options. You use the :before
CSS pseudo-element and the CSS background
property, or use inline SVG images.
input[type="radio"] + label:before {
content: "";
width: 1em;
height: 1em;
border: 1px solid black;
display: inline-block;
border-radius: 50%;
margin-inline-end: 0.5em;
}
input[type="radio"]:checked + label:before {
background: black;
}
There are a lot of possibilities with CSS to ensure checkboxes and radio buttons match your brand styles.
Learn more about styling <input type="checkbox">
, and <input type="radio">
and custom checkbox styles.
How to use your site's colors for form controls #
Do you want to bring your site styles to form controls with one line of code? You can use the accent-color
CSS property to achieve this.
checkbox {
accent-color: orange;
}
How can you remove platform-native styling of form controls?
Usingrevert: all;
. Using appearance: none;
. Using appearance: revert;
. Using revert: appearance;
. Try again!
🎉
Try again!
Try again!