Question

下面的简单HTML在Firefox和基于WebKit的浏览器中显示不同（我在Safari，Chrome和iPhone中查看过）。

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

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

更新
谢谢您的回答。我不再需要这个用于我的工作（而不是禁用我用样式input元素替换div元素），但我仍然很好奇为什么会发生这种情况，如果有任何方法可以控制这种行为......

<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>

Answer 1

-webkit-text-fill-color:#880000

Answer 2

手机和平板电脑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 */

Answer 3

这是一个有趣的问题，我已经尝试了很多覆盖，看看我是否可以实现它，但没有任何工作。现代浏览器实际上使用他们自己的样式表来告诉元素如何显示，所以也许你可以嗅出Chrome的样式表，你可以看到他们强迫它的样式。我会对结果非常感兴趣，如果你没有，我会花一点时间自己寻找它，以后我有时间浪费。

FYI，

opacity: 1!important;

不会覆盖它，所以我不确定它的不透明度。

Answer 4

您可以将颜色更改为#440000仅适用于Safari，但恕我直言最佳解决方案是不更改按钮的外观。这样，在每个平台上的每个浏览器中，它看起来都像用户期望的那样。

Answer 5

您可以使用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

Answer 6

for @ryan

我希望我的禁用输入框看起来像普通的输入框。这是Safari Mobile唯一可行的方法。

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

Answer 7

这个问题已经很老了，但我想我会发布一个更新的webkit解决方案。只需使用以下CSS：

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

Answer 8

2019年更新

将本页中的想法组合成一个“定下来”的解决方案。

getValue()

Answer 9

您可以使用按钮而不是输入吗？

<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>

Answer 10

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

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

在Safari上看到小玩意儿 https://jsfiddle.net/u549yk87/3/

禁用输入文本颜色

10 个答案: