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
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
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
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
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
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
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!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter