在 iOS 上禁用输入文本颜色

下面的简单 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>

104509 次浏览
小开

你能用按钮代替输入吗？

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

这是个有趣的问题，我试过很多次重写，看看能不能启动，但都没用。现代浏览器实际上使用他们自己的样式表来告诉元素如何显示，所以如果你能嗅出 Chrome 的样式表，你可以看到他们强加给它的样式。我会很感兴趣的结果，如果你没有一个我会花一点时间自己寻找它以后当我有一些时间浪费。

仅供参考,

opacity: 1!important;

不能覆盖它，所以我不确定它是不是不透明的。

小开

你可以改变颜色为 #440000只为 Safari，但恕我直言，最好的解决方案将是 不要改变按钮 完全没有的外观。这样，在每个平台上的每个浏览器中，它看起来就像用户期望的那样。

小开

You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input: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>

Beware that a disabled input and readonly input aren't the same. 只读输入可以有焦点，并且会在提交时发送值。请查看 < a href = “ http://www.w3.org/TR/html401/Interactive/forms.html # h-17.12”rel = “ nofollow noReferrer”> w3.org

小开

这个问题是非常老，但我认为我会张贴一个更新的 webkit 解决方案。 只需使用以下 CSS:

input::-webkit-input-placeholder {
color: #880000;
}
小开
最佳答案 
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
小开

电话和平板电脑的 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 */
小开

for @ryan

我希望我的残疾人输入框看起来像一个正常的。这是唯一可以在 Safari 手机上使用的东西。

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

If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-color to currentcolor, so the color property of the input will be used.

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

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

小开

更新于2021年:

Combining ideas from this page into a "set and forget" reset that makes all disabled text the same as normal text.

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 */
}

提交答案