CSS Pseudo-Classes: Bidang bentuk gaya berdasarkan input mereka

<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173993023124148.jpg?x-oss-process=image/resize,p_40"  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?x-oss-process=image/resize,p_40"  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;
}

3

kelas pseudo ini mencerminkan kehadiran atau ketiadaan atribut

. Penyemak imbas biasanya hanya menunjukkan medan yang diperlukan apabila penyerahan borang. membolehkan isyarat visual pra-penyebaran. :required :optional

required berfungsi sama, memilih elemen tanpa atribut :required.

input:required {
    border: 1px solid #ffc107;
}

:optional required

select:optional {
    border: 1px solid #ccc;
}

Kelas pseudo ini hanya terpakai kepada butang radio dan kotak semak, menggayakan input yang dipilih. Gaya adat sering memerlukan kombinasi pemilih yang bijak (gabungan saudara, elemen pseudo) kerana ketidakkonsistenan penyemak imbas.

3 Kelas pseudo ini berfungsi dengan :checked, , dan

input, yang memerlukan

dan/atau

atribut.

[type=radio]:checked + label {
    font-weight: bold;
    font-size: 1.1rem;
}

3

Gaya kelas pseudo ini berdasarkan kesahihan input terhadap kekangan (jenis, corak, min/max). :in-range :out-of-range

pelbagai negeri dan chaining

<range></range> <number></number> Kawalan bentuk boleh mempunyai pelbagai negeri secara serentak. Menguruskan kekhususan dan konflik cascading mungkin memerlukan pertimbangan yang teliti atau mengehadkan penggunaan kelas pseudo. Kelas pseudo boleh dirantai (mis., <date></date>). min max

(Nota kaki 6):

:out-of-range {
    background: #ffeb3b;
}

:in-range {
    background: #fff;
}

Dalam html5, kehadiran atribut

, tanpa mengira nilainya, menandakan medan yang diperlukan.

Soalan Lazim (FAQ): :valid (Bahagian ini ditinggalkan untuk keringkasan, kerana ia adalah pengulangan langsung bahagian FAQ asal.) :invalid

Atas ialah kandungan terperinci CSS Pseudo-Classes: Bidang bentuk gaya berdasarkan input mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!