在 iOS 上禁用输入文本颜色答案

【问题标题】：Disabled input text color on iOS在 iOS 上禁用输入文本颜色
【发布时间】：2021-07-13 09:55:10
【问题描述】：

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

【问题讨论】：

我也注意到了这一点，对我来说这是一个错误，因为当你输入 background-color:white 时，它会再次正确显示颜色。不透明度也几乎没有影响。虽然 -webkit-text-fill-color:#880000 可以工作

标签： iphone html css safari webkit

【解决方案1】：

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

【讨论】：

我希望我的禁用输入框看起来像一个正常的输入框。这是唯一可以在 Safari Mobile 中使用的东西。 -webkit-text-fill-color: rgba(0, 0, 0, 1); -webkit-不透明度：1；背景：白色；
@Ryan 是对的——对于 Mobile Safari，不透明度必须设置为 1。
opacity:1 也是必须的。
从 2016 年夏季开始，Safari 的当前版本不需要不透明度。
拯救了我的一天！然而，它也会影响input 元素的placeholder 文本颜色的着色。如果您也需要修复它，请查看此链接：css-tricks.com/almanac/selectors/p/placeholder

【解决方案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 */

【讨论】：

【解决方案3】：

2021 年更新：

将此页面中的想法结合到“设置并忘记”重置中，使所有禁用的文本与普通文本相同。

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

【讨论】：

这似乎不能作为“一劳永逸”的解决方案。 currentColor 与 -webkit-text-fill-color 一起使用时似乎没有按预期运行：jsfiddle.net/y1sgena2/2
@esten 我已经查看了这个，它似乎在最新的 Safari/iOS (2021) 中仍然有效
我发布的小提琴作品？在 safari 版本 14.1.1 中不适合我 - 不确定那是否是最新版本
@esten 你的小提琴表明有些东西不起作用，我也可以看到，但我不知道为什么 - 也许你正在尝试使用自定义禁用颜色，“设置和忘记”我发布的重置解决方案当然不起作用。这是我的解决方案（在 iOS14.2 中测试）jsfiddle.net/crgm4bz9/1

【解决方案4】：

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

仅供参考，

opacity: 1!important;

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

【讨论】：

谢谢！我找不到解释（在 Chrome 的用户代理样式表中没有这样的解释 - 只有“背景颜色：rgb（235, 235, 228）”用于禁用输入）并且我正在使用一种解决方法，但仍然很好奇发生了什么在...
史蒂夫，感谢您的努力，但我建议您以后将此作为评论而不是答案发布。

【解决方案5】：

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

【讨论】：

【解决方案6】：

为@ryan

我希望我的禁用输入框看起来像一个正常的输入框。这是唯一可以在 Safari Mobile 中使用的东西。

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

【讨论】：

【解决方案7】：

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

【讨论】：

谢谢，是的，这也是我的第一个想法，但由于焦点原因，它对我不起作用：在 iPhone 上，当用户点击只读元素时，键盘会弹出，这让我感到困惑'找到了我的解决方法，我的问题是相当'理论上的' - 为什么会出现这种行为？
一个有趣的解决方法：焦点问题也会带来可用性问题，尤其是对于使用屏幕阅读器的人。在大多数情况下，您只是不希望用户能够在表单中切换到只读/禁用字段。

【解决方案8】：

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

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

在 Safari 上看到那个小提琴 https://jsfiddle.net/u549yk87/3/

【讨论】：

【解决方案9】：

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

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

【讨论】：

对于 Firefox，使用 input:-moz-placeholder
eh.. 这是用于占位符属性的，我认为这对禁用字段没有影响。 @Kemo 下面的答案 (-webkit-text-fill-color) 确实有效

【解决方案10】：

你能用按钮代替输入吗？

<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 禁用我才能找到解决方法（比如，替换带有样式的
而不是设置 'disabled') - 但它确实感觉不对