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 状态管理

// www.javascriptcn.com code example
import React, { useState } from 'react';

function FormComponent() {
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <form>
      <input type="text" name="username" placeholder="用户名"/>
      <input 
        type="email" 
        name="email" 
        placeholder="邮箱"
        disabled={isDisabled}
      />
      <button type="submit">提交</button>
      <button onClick={() => setIsDisabled(!isDisabled)}>切换禁用状态</button>
    </form>
  );
}

export default FormComponent;

总结

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