Rumah >hujung hadapan web >tutorial css >CSS Pseudo-Classes: Bidang bentuk gaya berdasarkan input mereka
<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>
3
. 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>
: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.
3
Kelas pseudo ini berfungsi dengan :checked
, , dan
dan/atau
atribut.<code class="language-css">[type=radio]:checked + label { font-weight: bold; font-size: 1.1rem; }</code>
Gaya kelas pseudo ini berdasarkan kesahihan input terhadap kekangan (jenis, corak, min/max).
:in-range
:out-of-range
<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
<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.
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!