要根據(jù)表單輸入的不同狀態(tài)（如選中、無效或聚焦）進行樣式設計，應使用CSS偽類。 1. 使用:checked偽類可為已選中的複選框或單選按鈕設置樣式；2. 使用:invalid偽類可為未通過驗證的字段設置樣式，結(jié)合:user-invalid可在用戶交互後應用；3. 使用:focus和:hover偽類可增強可用性和可訪問性；4. 可組合多個偽類實現(xiàn)多狀態(tài)樣式設計，例如同時匹配無效且聚焦的狀態(tài)。這些方法無需JavaScript即可實現(xiàn)動態(tài)樣式變化。

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 combinators.

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.

基本上就這些。

以上是我如何使用CSS選擇器來根據(jù)以下狀態(tài)進行樣式表單輸入，例如：檢查或：無效？的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！