禁用输入文本颜色

Inc*_*tly 80 html css iphone safari webkit

下面的简单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>
Run Code Online (Sandbox Code Playgroud)

小智 197

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
Run Code Online (Sandbox Code Playgroud)

  • 我希望我的禁用输入框看起来像普通的输入框.这是唯一适用于Safari Mobile的功能.-webkit-text-fill-color:rgba(0,0,0,1); -webkit-opacity:1; 背景:白色; (50认同)
  • @Ryan是正确的 - 对于Mobile Safari,不透明度必须设置为"1". (11认同)
  • `opacity:1`也是必要的. (7认同)
  • 从 2016 年夏季开始,当前版本的 Safari 不需要不透明度。 (3认同)
  • 只有这个解决方案适合我.代表.!谢谢 (2认同)
  • 拯救了我的一天!然而,它也会影响 `input` 元素的 `placeholder` 文本颜色的着色。如果您也需要修复它,请查看此链接:https://css-tricks.com/almanac/selectors/p/placeholder/ (2认同)

lij*_*nma 42

电话和平板电脑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 */
Run Code Online (Sandbox Code Playgroud)


pau*_*ol. 10

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 */
}
Run Code Online (Sandbox Code Playgroud)


Ste*_*rks 6

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

仅供参考,

opacity: 1!important;
Run Code Online (Sandbox Code Playgroud)

不会覆盖它,所以我不确定它是不透明的.


Kor*_*nel 6

你可以改变颜色,#440000只为Safari浏览器,但恕我直言最好的解决办法是改变按钮的外观在所有.这样,在每个平台上的每个浏览器中,它看起来都像用户期望的那样.


Ser*_*ipc 5

您可以使用readonly属性而不是disabled属性,但是您将需要添加一个类,因为没有伪类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>
Run Code Online (Sandbox Code Playgroud)

请注意,禁用输入和只读输入并不相同。只读输入可以具有焦点,并将在提交时发送值。看看w3.org


van*_*102 5

对于@ryan

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

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
Run Code Online (Sandbox Code Playgroud)