Rumah >hujung hadapan web >tutorial css >CSS Pseudo-Classes: Bidang bentuk gaya berdasarkan input mereka

CSS Pseudo-Classes: Bidang bentuk gaya berdasarkan input mereka

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌asal
2025-02-19 09:57:09886semak imbas
<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>

CSS Pseudo-classes: Styling Form Fields Based on Their Input 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.

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

CSS Pseudo-classes: Styling Form Fields Based on Their Input

:optional required

<code class="language-css">select:optional {
    border: 1px solid #ccc;
}</code>
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.

CSS Pseudo-classes: Styling Form Fields Based on Their Input

3 Kelas pseudo ini berfungsi dengan :checked, , dan

input, yang memerlukan

dan/atau

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

CSS Pseudo-classes: Styling Form Fields Based on Their Input

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):
<code class="language-css">:out-of-range {
    background: #ffeb3b;
}

:in-range {
    background: #fff;
}</code>
Dalam html5, kehadiran atribut

, tanpa mengira nilainya, menandakan medan yang diperlukan. CSS Pseudo-classes: Styling Form Fields Based on Their Input

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn