禁用的输入文字颜色

93

下面的简单HTML在基于Firefox和基于WebKit的浏览器中的显示方式有所不同（我在Safari，Chrome和iPhone中进行了检查）。

在Firefox中，边框和文本都具有相同的颜色（#880000），但在Safari中，文本会变得更浅一些（好像已对其应用了一些透明度）。

我可以以某种方式解决此问题（在Safari中删除此透明度）吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    input:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <input type="text" value="disabled input box" disabled="disabled"/>
    </form>
</body>
</html>

— 顺带一提
source

我还注意到了这一点，对我来说这是一个错误，因为当您将输入的background-color：white放置时，它将再次正确显示颜色。同样，不透明的影响很小。Althought的-webkit-文本填充颜色：＃880000将工作

— 米格尔

235

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

— 科莫
source

51

我希望禁用的输入框看起来像一个普通的输入框。这是唯一可以在Safari Mobile中使用的功能。-webkit-text-fill-color：rgba（0，0，0，1）; -webkit-opacity：1; 背景：白色；

— 瑞安

11

@Ryan是正确的–必须将1Mobile Safari的不透明度设置为。

— David Jones

7

opacity:1也有必要。

— Marcel Falliere，2015年

3

截至2016

— Andy Mercer

2

拯救了我的一天！但是，它也会影响元素placeholder文本颜色的着色input。如果您也需要修复，请查看以下链接：css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

手机和平板电脑的Webkit浏览器（Safari和Chrome）以及台式机IE对禁用的表单元素进行了许多默认更改，如果要设置禁用输入的样式，则需要覆盖这些更改。

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */

— 利金马
source

6

这是一个有趣的问题，我已经尝试了很多替代方法以查看是否可以解决问题，但是没有任何效果。现代浏览器实际上使用他们自己的样式表来告诉元素如何显示，因此，如果您可以嗅探Chrome的样式表，则可以看到它们强制使用哪些样式。我会对结果非常感兴趣，如果您没有结果，我会花一些时间自己寻找一些时间，以备不时之需。

仅供参考

opacity: 1!important;

不会覆盖它，所以我不确定它是否不透明。

— 史蒂夫·珀克斯（Steve Perks）
source

谢谢！我找不到解释（Chrome的用户代理样式表中没有类似的内容-仅针对禁用的输入为“ background-color：rgb（235，235，228）”），但我正在使用一种解决方法，但仍对正在发生的事情感到好奇在...上

— 偶然地，

史蒂夫，谢谢您的努力，但我建议将来您将此作为评论而不是答案发表。

— avernet 2010年

6

你可以改变颜色，#440000只为Safari浏览器，但恕我直言最好的解决办法是不扣的变化看起来在所有。这样，在每个平台上的每个浏览器中，它都将像用户期望的那样。

— 内核
source

5

2019年更新：

将此页面中的想法组合成一个“设置并忘记”的解决方案。

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

— 保罗。
source

4

您可以使用readonly属性而不是Disabled属性，但是由于没有伪类输入：readonly，因此需要添加一个类。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

注意禁用的输入和只读输入是不同的。只读输入可以具有焦点，并将在提交时发送值。看看w3.org

— Serxipc
source

谢谢，是的，这也是我的第一个主意，但由于关注而对我不起作用：在iPhone上，当用户点击一个readonly元素时，键盘会弹出，这令人困惑，我已经找到了解决方法，而我问题是“理论上的”-为什么这种行为？

— 偶然

一个有趣的解决方法：焦点问题还带来了可用性问题，尤其是对于使用屏幕阅读器的用户。在大多数情况下，您只是不希望用户能够使用Tab键查看表单中的只读/禁用字段。

— avernet 2010年

4

对于@ryan

我希望禁用的输入框看起来像一个普通的输入框。这是唯一可以在Safari Mobile中使用的功能。

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

— 万杜1102
source

3

如果要解决所有禁用输入的问题，可以将定义-webkit-text-fill-color为currentcolor，因此color将使用输入的属性。

input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

看到Safari上的小提琴 https://jsfiddle.net/u549yk87/3/

— 弗里兹
source

2

这个问题很老，但我认为我会发布更新的Webkit解决方案。只需使用以下CSS：

input::-webkit-input-placeholder {
  color: #880000;
}

— 道格
source

3

对于Firefox，请使用input：-moz-placeholder

— stephan.com，2010年

1

eh ..这是针对占位符属性的，我认为这对禁用字段没有影响。-webkit-text-fill-color

— @Kemo

0

您可以使用按钮代替输入吗？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>

并不是真的...在我的实际应用程序中，这些文本框通常被启用并用于输入，并且只有在某些条件下，它们才被JavaScript禁用，我可以找出一种解决方法（例如，将<input />替换为样式<div> < / div>而不是设置“ disabled”），但确实感觉不对

— 偶然的是，