Forms & Input

Forms and input are tricky. Most of it is completely handled by browsers: their functionality, checking input validity, even what they look like. All of that, and I just need to type <input type="text">!

It’s very nice. The downside, however, is that input elements receive a lot of default styling that gets in the way. And if you want to change that, you have to rely on more specific selectors, because input would just select everything equally.

In this chapter, I will explain the default styles (and how to get rid of them). Then I’ll give the pseudo-classes and pseudo-elements you can use to target specific parts of input elements.

Default Styles

By default, input elements stick to their own default font (at a small size). They get a border and that’s it. (No padding, no margin, a small fixed size.)

In the example below, notice how setting a font family or size does nothing for the input elements. Similarly, notice how they’re quite small, displayed inline, with a tiny border.

I like to turn all input elements into full-width elements and inherit the properties they’re missing. Additionally, I prefer replacing the border with a background-color or (inset) shadow and using round corners.

It’s still not amazing, but it’s more friendly and more usable. Not only is it in line with the rest of the design, you can easily adjust size and location of the elements with flexboxes or grids.

Pseudo-Classes

Hopefully you remember that pseudo-classes were for styling a specific state of an element.

Well, input elements can be in many states! And there’s a pseudo-class for each of them.

Focus

The :focus pseudo-element selects the element that currently has focus. This means the user last clicked on it, or when they type, the text will interact with that element.

Only one element can have focus on a web page. Usually, you can press TAB to switch focus between input elements as well.

In the example below, try clicking inside the different input boxes to focus on them.

Notice how I use the outline property. By default, browsers modify the outline to show focus, not the border.

Disabled/Enabled

Use the :disabled pseudo-class to target disabled input elements. The :enabled pseudo-element targets everything else.

By default, disabled elements become “greyed out”. How? The browser sets their color, background-color and border properties to some transparent gray.

As such, to counteract that, set these values to something else.

In the example below, try removing your own properties, or target enabled elements instead.

Valid/Invalid

The :valid psuedo-class targets elements with a valid input. The :invalid pseudo-class targets elements with invalid input.

The input below, for example, expects a valid email. But it doesn’t have one, so the pseudo-class styles are triggered.

Required/Optional

The :required pseudo-class targets input elements that are required. (The required HTML attribute is set.) The :optional pseudo-class targets everything else.

Range

The :in-range selects input elements whose value is within the range defined by the input element itself. As expected, :out-of-range selects those outside of this range.

In the example below, try changing the number to something in or out of range.

Checked

Finally, use :checked to select all checkboxes that are, well, checked.

In the example below, check some boxes!

Pseudo-Elements

This is where everything breaks down. Input elements add a lot of pseudo-elements. (Things not defined in the HTML, by you, but added to the page later by the browser.)

How do you style these? Different browsers use different words. Some require a prefix (such as -moz-), some don’t. You just have to look it up when you need it.

There are two common ones that are well-supported, though.

• ::placeholder styles the placeholder text
• ::file-selector-button styles the button for a file upload input field.