117

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

4

10 回答 10

274 
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
于 2011-01-10T15:21:54.340 回答
45

手机和平板电脑的 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 */
于 2014-05-07T07:20:59.953 回答
15

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 */
}
于 2019-04-27T01:44:46.257 回答
6

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

供参考，

opacity: 1!important;

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

于 2008-11-04T23:22:57.410 回答
6

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

于 2008-11-05T00:00:23.343 回答
5

对于@ryan

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

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
于 2017-07-20T08:31:31.887 回答
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

于 2008-11-05T16:27:44.270 回答
3

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

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

在 Safari 上查看小提琴 https://jsfiddle.net/u549yk87/3/

于 2019-03-20T03:35:59.750 回答
2

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

input::-webkit-input-placeholder {
  color: #880000;
}
于 2010-06-01T16:09:23.647 回答
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>
于 2008-11-04T16:56:21.373 回答