下面的简单 HTML 在 Firefox 和基于 WebKit 的浏览器中显示不同（我在 Safari、Chrome 和 iPhone 中检查过）。
在 Firefox 中，边框和文本具有相同的颜色 (
#880000我可以以某种方式解决这个问题（在 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>-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 */
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 */
}
这是一个有趣的问题，我尝试了很多替代方法来看看是否可以让它继续运行，但没有任何效果。现代浏览器实际上使用自己的样式表来告诉元素如何显示，因此如果您可以嗅出 Chrome 的样式表，您也许可以看到它们强制使用的样式。我会对结果非常感兴趣，如果你没有结果，当我有时间浪费时，我会花一点时间自己寻找它。
仅供参考，
opacity: 1!important;
不会覆盖它，所以我不确定它是否不透明。
您可以将 Safari 的颜色更改为
#440000对于@ryan
我希望禁用的输入框看起来像正常的输入框。这是唯一可以在 Safari Mobile 中使用的功能。
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
您可以使用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
如果要解决所有禁用输入的问题，可以将
-webkit-text-fill-colorcurrentcolorcolorinput[disabled] {
-webkit-text-fill-color: currentcolor;
}
在 Safari 上查看那个小提琴 https://jsfiddle.net/u549yk87/3/
这个问题很老了，但我想我会发布一个更新的 webkit 解决方案。 只需使用以下 CSS：
input::-webkit-input-placeholder {
color: #880000;
}
可以使用按钮代替输入吗？
<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>
为我工作
.default:disabled {
background-color: var(--white-200);
-webkit-text-fill-color: var(--black-transparent-300);
}
.default::-webkit-input-placeholder {
-webkit-text-fill-color: var(--color-placeholder);
color: var(--color-placeholder) !important;
}