如何删除禁用输入中的字体颜色

Posted 2023-02-22

【中文标题】如何删除禁用输入中的字体颜色

【英文标题】：How remove font color in disabled input

【发布时间】：2013-02-01 21:34:20

【问题描述】：

http://jsfiddle.net/NUDDv/

html：

<div class="red">
    <input type="text" value="text" disabled="disabled">
    <select disabled>
        <option>aaa</option>
        <option>aaa</option>
    </select>
</div>
<div>
    <input type="text" value="text" disabled="disabled">
    <select disabled>
        <option>aaa</option>
        <option>aaa</option>
    </select>
</div>

CSS：

div.red input[type=text],
div.red select
    color: red;

div.red input[type=text][disabled],
div.red select[disabled]
    color: none;

我可以写什么到 css 禁用输入以去除红色？我不能设置颜色，因为禁用的输入看起来不太好。我想只在 CSS 中设置它。

【参考方案1】：

没有什么叫color:none;

div.red input[type=text][disabled],
div.red select[disabled]
    color: black;

要恢复默认颜色使用：

color:GrayText;

CSS 系统颜色关键字 - link

CSS 系统颜色关键字是一种使用 CSS 设置样式的方式 文档，以便它们集成到您的环境中 客户正在使用。而不是准确指定颜色，你告诉 用户代理使用系统上定义的颜色。

【讨论】：

这看起来不太好...image

【参考方案2】：

保持简单。使用:not() 伪类。

见DEMO。

div.red input[type=text]:not([disabled]),
div.red select:not([disabled])
    color: red;

【讨论】：

这很简单。为什么我不认为:)

【参考方案3】：

color: none 不是有效颜色。使用 hex、rgb 或任何 css 有效颜色。如果您希望文本不可见，请使用color: transparent;。

为了让颜色回落到元素的原始颜色或禁用状态，您可以使用color: initial;。见here。

【讨论】：

那么文本是不可见的，我希望这个默认禁用颜色。

然后使用颜色：初始； .这使得颜色回落到浏览器的默认颜色。

@F***Lauer 设置 color: initial 是 not supported in IE。

@RubenInfante：谢谢提示。好像 IE 又搞砸了（还有 Opera）。

【参考方案4】：

我认为跨浏览器不可能只使用 CSS 将文本颜色重置为其initial state，一旦它在 CSS 中指定。禁用输入时，您必须删除 red 类。

否则，您可以强制特定的 color 和 background-color 处于禁用状态，以实现跨浏览器的某种程度的奇偶校验。

input[type=text][disabled],
select[disabled] 
    color: #545454 !important;
    background-color: #EBEBE4 !important;

但是请注意，还有许多其他与表单元素相关的默认样式。你不能指望任何地方的东西看起来都完全一样。

jsfiddle

【讨论】：

网页浏览器的背景有问题...在 Firefox XP 中背景为灰色，在 Windows 7 中为白色...

@Peter 是否希望背景在禁用时始终为灰色？

【参考方案5】：

在你的 jsfiddle 第三行 javascript 中：

$('input[type=text], select').attr('disabled', 'disabled').css('color', 'grey');

【讨论】：

.css('color', ''); 从我这里工作，现在我想在没有 JS 的唯一 CSS 上做。

JS 是跨浏览器的解决方案，我认为只使用 CSS 你会从你的网站中删除一些浏览器，但如果你仍然想只使用 CSS 为什么不使用 @Ali Bassam 解决方案？