PricingLoginStart free
CSS Academy · 课时

:checked、:disabled 与表单状态伪类

根据表单元素的交互状态（如已选中、已禁用和必填）设置其样式。

第 4 / 4 课13 个步骤

:checked、:disabled 与表单状态伪类 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

表单状态伪类概览

CSS 提供了反映 HTML 表单元素状态的伪类。借助这些伪类，无需 JavaScript 即可设置表单控件样式。

:checked

复选框和单选按钮被选中时，:checked 会应用于它们；选择下拉列表中的 <option> 元素时，也会应用于该元素。

<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>

:checked 用于自定义复选框

:checked 技巧：隐藏原生输入控件，并使用由 :checked 触发的相邻兄弟选择器为自定义方框设置样式：

<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>

:disabled 和 :enabled

:disabled 会选择带有 disabled 属性的表单元素。:enabled 会选择可以进行交互的元素。

<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>

:required 和 :optional

:required 会选择带有 required 属性的输入框。:optional 会选择不带该属性的输入框。

<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />

:valid 和 :invalid

:valid 和 :invalid 反映浏览器原生的表单验证状态，该状态基于类型、模式、最小值/最大值和必填约束。

<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />

:user-valid 和 :user-invalid

浏览器验证会在页面加载时立即运行，即使用户尚未进行交互。:user-valid 和 :user-invalid 仅在用户与字段交互之后应用，用户体验要好得多。

<input type="email" value="not-an-email" required />

:placeholder-shown

当输入框显示占位文本时，:placeholder-shown 会应用——这意味着该字段当前为空。可以使用它在不借助 JavaScript 的情况下检测空输入框。

<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>

:read-only 和 :read-write

:read-only 会选择带有 readonly 属性的输入框。:read-write 会选择可编辑的输入框。

<input type="text" value="Read-only field" readonly />

:indeterminate

:indeterminate 会应用于处于中间状态的复选框（既未选中也未取消选中，该状态通过 JavaScript 设置），以及所在组中尚未做出任何选择的单选按钮。

<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>

:in-range 和 :out-of-range

对于带有最小值/最大值的 type="number" 或 type="range" 输入框，:in-range 和 :out-of-range 会反映当前值相对于这些边界的有效性。

<input type="number" min="1" max="10" value="15" />

快速检查

哪个伪类只会在用户与输入字段交互之后应用表单验证样式？

在交互式课程中回答

回顾

CSS 表单状态伪类无需 JavaScript 即可反映原生表单验证状态和交互状态，包括 :checked、:disabled、:required、:valid、:invalid 等。为了获得更好的用户体验，请优先使用 :user-invalid，而不是 :invalid。请使用 :placeholder-shown 检测空字段。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
40
课程
159
免费开始学习查看完整课程

常见问题解答

「:checked、:disabled 与表单状态伪类」课时是免费的吗？

是的 — 「:checked、:disabled 与表单状态伪类」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「:checked、:disabled 与表单状态伪类」这节课中我会学到什么？

根据表单元素的交互状态（如已选中、已禁用和必填）设置其样式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「:checked、:disabled 与表单状态伪类」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. :hover、:focus、:active 与 :visited
  2. :nth-child 与 :nth-of-type
  3. :not()、:is() 与 :where()
  4. :checked、:disabled 与表单状态伪类
← 返回 CSS Academy