CSS Pseudo-classes: Forms

Yesterday we started looking at pseudo-classes that relate to links. In this article, we’ll take a look at form-related pseudo-classes.

I’ve split this up into a series of four, where this is the second part about form pseudo-states.

The other parts:

• Link pseudo-states
• Form pseudo-states (this one 💖)
• Element state selectors
• Other pseudo states

Form pseudo-states permalink

Another significant use case for pseudo-classes is forms. We already had a glimpse at the focus states, which can also be used on form elements.

But there are some more we can leverage:

• :disabled: Element is disabled
• :enabled: Element is active. However, is the default case so rarely used
• :checked: Checkbox/radio is checked
• :indeterminate: Checkbox/radio is not true or false
• :placeholder-shown: Placeholder is active and has no value
• :valid: Field is valid
• :invalid: Field is invalid
• :in-range: Number field is in a range of options
• :required: Field is required
• :optional: Field is optional, again a default state so rarely used

:disabled & :enabled permalink

As mentioned in the descriptive text for :enabled, it’s also a default state, so it’s not often used. As we instead use the main selector to style on.

We can use the :disabled state to indicate when a form field is disabled, and the user can’t change anything.

Let’s say we have a button that is disabled until they fill out all fields, for instance. It’s an excellent way to showcase that it’s not yet valid to the user.

button:disabled {
  background: lightGray;
  color: #333;
  cursor: not-allowed;
}

You can see the difference in the following CodePen.

See the Pen `:focus`, `:focus-within`, & `:focus-visible` by Chris Bongers (@rebelchris) on CodePen.

:checked & :indeterminate permalink

The checked and indeterminate pseudo-classes can help style checkboxes and radio buttons.

The checked class will fire if the element is on, and indeterminate is funny as it targets non-binary states.

What does that even mean? A checkbox can be on/off right, but there are rare cases where it can be neither. And that’s precisely where indeterminate kicks in.

Note: To be honest never needed it in my life

How can we style with the checked state?

input[type='checkbox']:checked {
  box-shadow: 0 0 0 3px hotpink;
}

I’m using the box-shadow here as this is one view that works well for checked states.

If you plan to style the checkbox further, it might be best to opt for a custom checkbox.

As for the indeterminate, it’s not worth going into detail here as it’s such a niche use case.

CSS-tricks has an excellent article on it if you wish more information.

Try it out in this CodePen.

See the Pen `:disabled` & `:enabled` by Chris Bongers (@rebelchris) on CodePen.

:placeholder-shown permalink

Before, I dedicated a more detailed article about the CSS :placeholder-shown pseudo class.

It can be used to indicate which fields have their placeholder showing.

input:placeholder-shown {
  border: 5px dashed teal;
}

This results in this:

See the Pen `:checked` by Chris Bongers (@rebelchris) on CodePen.

Note: Try and add a value in the bottom input. It should change the appearance.

:valid, :invalid, & :in-range permalink

These are validation classes and can be used to showcase a un valid field.

Let’s use an email field. It’s the easiest to showcase both the invalid and the valid states.

We can add a red/green border and shadow based on the validation state like so:

input:invalid {
  border: 2px solid red;
  box-shadow: 0 0 2px red;
  outline: red;
}
input:valid {
  border: 2px solid green;
  box-shadow: 0 0 2px green;
  outline: green;
}

You can try it out in the below CodePen by adding a non-email and email value.

The in-range one is in line with these two and can be used for number fields to determine if they are in the correct range.

input:in-range {
  border: 2px solid green;
  box-shadow: 0 0 2px green;
  outline: green;
}

You can also try this one out, but pick a number between 1 and 10. (Which is the range for the number input)

See the Pen `:placeholder-shown` by Chris Bongers (@rebelchris) on CodePen.

:required & :optional permalink

This can be used to determine if a field is required or not. The optional state is the default state, so it is unnecessary to state this explicitly.

input:required {
  background: orange;
}

This will give all required fields an orange background.

See the Pen `:valid`, `:invalid`, & `:in-range` by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter