To style the different states of form input (such as selected, invalid or focused), the CSS pseudo-class should be used. 1. Use the :checked pseudo-class to set styles for selected check boxes or radio buttons; 2. Use the :invalid pseudo-class to set styles for fields that have not passed the verification, combined with :user-invalid can be applied after user interaction; 3. Use the :focus and :hover pseudo-classes to enhance availability and accessibility; 4. Multiple pseudo-classes can be combined to implement multi-state style design, such as matching invalid and focused states at the same time. These methods can achieve dynamic style changes without JavaScript.

When you want to style form inputs differently based on their current state — like whether they're checked, invalid, or focused — CSS pseudo-classes like :checked , :invalid , and others are your best bet. These selectors let you apply styles conditionally without needing JavaScript.

Styling Checked Inputs

Use the :checked pseudo-class to target checkboxes or radio buttons that are selected.

For example:

 input[type="checkbox"]:checked {
  accent-color: #007bff;
}

This changes the color of a checked checkbox. You can also do more creative things like showing or hiding other elements when something is checked by using adjacent or general sibling combiners.

Some common use cases:

• Changing label styles when a checkbox is checked
• Creating custom toggle switches with hidden checkboxes
• Highlighting selected options in a form

Just remember, :checked only works on checkboxes, radio buttons, and (less commonly) <option> elements inside <select> menus.

Handling Invalid Input States

To style fields that fail validation, use the :invalid pseudo-class.

Example:

 input:invalid {
  border: 1px solid red;
}

By default, browsers might already show some visual feedback for invalid inputs (like a red outline), but this selector lets you customize it further.

One thing to note: browsers often apply :invalid as soon as the page loads, which can make it feel aggressive if users haven't interacted yet. To avoid that, many developers combine it with :user-invalid instead, which only applies after the user has tried to submit or left the field.

You can also:

• Add background icons next to invalid fields
• Show error messages conditionally using CSS (though JS is usually better for dynamic messages)
• Style only specific input types like emails or required fields

Adding Focus and Hover Effects

While not strictly about state like :checked or :invalid , styling focus and hover states improves usability and accessibility.

Here's how you might do it:

 input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

These effects help users understand where they are on the form. It's especially useful for keyboard navigation.

Tips:

• Always keep some visual indicator on focus for accessibility
• Use transitions sparingly to keep things smooth
• Avoid removing default focus outlines unless you replace them

Customizing Based on Multiple States

Sometimes you need to target inputs that match more than one state at once — like an invalid input that's also been touched.

You can chain pseudo-classes:

 input[type="email"]:invalid:focus {
  border-color: darkred;
}

This helps create more context-aware styling, such as showing a harsher red only when someone tried to submit a bad email.

Other combinations you might find useful:

• input:required
• input:focus:valid
• input:checked label

These let you build complex UI behaviors purely with CSS, like toggling panels or validating forms progressively.

Basically that's it.

The above is the detailed content of How can I style form inputs based on their state, like :checked or :invalid, using CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!