CSS 选择器 :disabled

概述

:disabled 是一个伪类选择器，用于选择处于禁用状态的表单元素。当表单元素被设置为不可用时，通常会显示为灰色或不可点击的状态。通过使用 :disabled 选择器，我们可以针对这些特定元素应用自定义样式。

示例 HTML 结构

<form>
  <input type="text" name="username" placeholder="用户名">
  <input type="email" name="email" placeholder="邮箱" disabled>
  <button type="submit">提交</button>
</form>

基础样式

仅应用背景颜色

input:disabled {
  background-color: #f0f0f0;
}

更改字体颜色

input:disabled {
  color: #999;
}

高级样式

调整边框样式

input:disabled {
  border: 1px solid #ccc;
}

添加阴影效果

input:disabled {
  box-shadow: inset 0 0 5px rgba(0,0,0,.2);
}

组合多种样式

input:disabled {
  background-color: #f0f0f0;
  color: #999;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 5px rgba(0,0,0,.2);
}

应用于不同类型的表单元素

文本输入框

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled {
  background-color: #f0f0f0;
  color: #999;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 5px rgba(0,0,0,.2);
}

复选框和单选按钮

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background-color: #f0f0f0;
  color: #999;
  border: 1px solid #ccc;
}

文本区域

textarea:disabled {
  background-color: #f0f0f0;
  color: #999;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 5px rgba(0,0,0,.2);
}

动态更改状态

使用 JavaScript 动态启用或禁用元素

document.querySelector('input[name="email"]').disabled = true;

使用 React 状态管理

-- -------------------- ---- -------
------ ------ - -------- - ---- --------

-------- --------------- -
  ----- ------------ -------------- - ----------------

  ------ -
    ------
      ------ ----------- --------------- -------------------
      ------ 
        ------------ 
        ------------ 
        ----------------
        ---------------------
      --
      ------- -------------------------
      ------- ----------- -- -------------------------------------------
    -------
  --
-

------ ------- --------------

总结

通过使用 :disabled 伪类选择器，我们可以有效地控制和美化那些被禁用的表单元素。这不仅提升了用户体验，也让界面看起来更加一致和专业。在实际项目中，根据具体需求调整样式，可以创造出更加丰富的视觉效果。