如何通过css选择disabled表单元素-css教程-PHP中文网

如何通过css选择disabled表单元素

P粉602998670

发布： 2025-10-28 22:34:02

原创

879人浏览过

使用:disabled伪类可选中禁用表单元素并设置样式，如背景色、文字色等；也可限定元素类型或结合属性选择器[disabled]进行更精确控制。

如何通过css选择disabled表单元素

要通过 CSS 选择 disabled 的表单元素，可以使用伪类 :disabled。这个选择器能匹配所有被设置为 disabled 属性的表单控件，比如输入框、按钮、下拉框等。

:disabled 会选中所有处于禁用状态的表单元素。例如：

:disabled {
  background-color: #f2f2f2;
  color: #888;
  border: 1px solid #ccc;
}

登录后复制

这段样式会让所有禁用的元素背景变灰、文字颜色变浅。

你也可以限定只对某类元素应用样式，提高精确度：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

示例：

input:disabled {
  opacity: 0.6;
}

button:disabled {
  cursor: not-allowed;
  background-color: #ddd;
}

登录后复制

如果想更精细地控制，可以结合 class 或 disabled 属性本身：

[disabled] {
  pointer-events: none;
}

.my-form input[disabled] {
  border-color: #e0e0e0;
}

登录后复制

使用属性选择器 [disabled] 在某些情况下兼容性更好，也能实现类似效果。

基本上就这些。使用 :disabled 是最标准、简洁的方式，适用于现代浏览器。注意确保元素确实有 disabled 属性，否则样式不会生效。

以上就是如何通过css选择disabled表单元素的详细内容，更多请关注php中文网其它相关文章！

大家都在看：