返回

从头学前端-37：解锁表单输入中的伪类选择器，玩转表单设计！

前端

在前端开发中，我们经常需要处理各种各样的表单。为了让表单更美观、更易用，我们可以使用 CSS 伪类选择器来对表单元素进行样式化。在本文中，我们将重点介绍三种常用的表单输入伪类选择器：:enabled、:disabled、:read-only 和 :read-write。

:enabled 和 :disabled

:enabled 选择器匹配处于启用状态的表单元素，而 :disabled 选择器匹配处于禁用状态的表单元素。我们可以使用这两个伪类选择器来改变表单元素的外观和行为。例如，我们可以将禁用状态的表单元素设置为灰色并禁用其交互功能。

/* 禁用状态的表单元素 */
input:disabled {
  color: gray;
  background-color: #efefef;
  border-color: #efefef;
  cursor: not-allowed;
}

/* 启用状态的表单元素 */
input:enabled {
  color: black;
  background-color: white;
  border-color: #ccc;
  cursor: pointer;
}

:read-only 和 :read-write

:read-only 选择器匹配只读的表单元素，而 :read-write 选择器匹配可读写的表单元素。我们可以使用这两个伪类选择器来改变表单元素的外观和行为。例如，我们可以将只读状态的表单元素设置为灰色并禁用其输入功能。

/* 只读状态的表单元素 */
input:read-only {
  color: gray;
  background-color: #efefef;
  border-color: #efefef;
}

/* 可读写状态的表单元素 */
input:read-write {
  color: black;
  background-color: white;
  border-color: #ccc;
}

:checked

:checked 选择器匹配被选中的表单元素，例如单选按钮和复选框。我们可以使用这个伪类选择器来改变被选中表单元素的外观和行为。例如，我们可以将被选中的单选按钮或复选框设置为蓝色。

/* 被选中的单选按钮或复选框 */
input:checked {
  color: blue;
  background-color: #efefef;
  border-color: blue;
}

通过使用这些表单输入伪类选择器，我们可以轻松地改变表单元素的外观和行为，从而创建更美观、更易用的表单。