CSS偽級：基於其輸入的樣式表單字段

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173993023124148.jpg" class="lazy" alt="CSS Pseudo-classes: Styling Form Fields Based on Their Input ">

**Key Concepts: Styling Form Fields with CSS Pseudo-Classes**

This article explores CSS pseudo-classes specifically designed for styling form fields based on user input, field requirements, and enabled/disabled states.  We'll cover how to leverage these selectors to enhance user experience and provide clear visual feedback.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173993023288237.jpg" class="lazy" alt="CSS Pseudo-classes: Styling Form Fields Based on Their Input ">

*This section is adapted from "CSS Master" by Tiffany B. Brown.*

Let's examine CSS pseudo-classes tailored for form fields and their inputs. These selectors enable styling based on input validity, required fields, and enabled/disabled status.  These pseudo-classes are inherently form-specific, reducing the need for extensive scoping. However, targeted selectors remain beneficial for differentiating styling across various form control types.

**`:enabled` and `:disabled`**

These pseudo-classes target elements with or without the `disabled` HTML5 attribute. This applies to input controls (e.g., `<input>`, `<select>`, `<button>`), and `<fieldset>` elements.  Form elements are enabled by default; the `disabled` attribute toggles this state.  `:enabled` selects elements lacking the `disabled` attribute, while `:disabled` selects elements possessing it.

```css
button:disabled {
    opacity: 0.5;
}</fieldset></button></select></code>

:required和:optional

>

這些偽級反映了屬性的存在或不存在。 瀏覽器通常僅表示表單提交時所需的字段。 required允許預次訪問視覺提示。 :required

<code class="language-css">input:required {
    border: 1px solid #ffc107;
}</code>

的工作方式相似，選擇沒有> :optional required

<code class="language-css">select:optional {
    border: 1px solid #ccc;
}</code>

:checked此偽級僅適用於無線電按鈕和復選框，所選輸入的樣式。 自定義樣式通常需要巧妙的選擇器組合（同級組合，偽元素），因此瀏覽器不一致。 >

<code class="language-css">[type=radio]:checked + label {
    font-weight: bold;
    font-size: 1.1rem;
}</code>

和

:in-range> :out-of-range這些偽級可與>，

和

>輸入一起工作，需要和/或<range></range>屬性。 <number></number> <date></date>min max

<code class="language-css">:out-of-range {
    background: #ffeb3b;
}

:in-range {
    background: #fff;
}</code>

和

> 這些偽級樣式基於輸入有效性（類型，模式，最小/最大）。 :valid:invalid

多個狀態和鏈接

表格控件可以同時具有多個狀態。 管理特異性和級聯衝突可能需要仔細考慮或限制偽級使用。 偽級可以被束縛（例如，

）。

> （腳註6）：在html5中，

屬性的存在，無論其價值如何，都表示所需的字段。 >

input:focus:invalid常見問題（常見問題解答）：

（為簡短而省略了此部分，因為它是原始FAQ部分的直接重複。）

以上是CSS偽級：基於其輸入的樣式表單字段的詳細內容。更多資訊請關注PHP中文網其他相關文章！