禁用input文字颜色
下面简单的HTML在Firefox和基于WebKit的浏览器（我在Safari，Chrome和iPhone中检查过）显示不同。
在Firefox中，边框和文本都具有相同的颜色（ #880000 ），但在Safari中，文本变得更轻（就像应用了一些透明度一样）。
我可以以某种方式解决这个问题（在Safari中删除这个透明度）？
更新：
谢谢您的回答。 我不再需要这个工作了（而不是禁用我用样式的div元素replaceinput元素），但我仍然好奇为什么发生这种情况，如果有任何方法来控制这种行为…
<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
手机和平板电脑webkit浏览器（Safari和Chrome）和桌面IE浏览器对禁用的表单元素进行了一些默认的更改，如果您要对禁用的input进行样式化，则需要覆盖这些元素。
-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 */
你可以改变颜色为#440000只为Safari，但恕我直言，最好的解决scheme将不会改变button的外观。 这样，在每个平台的每个浏览器上，它就会像用户所期望的那样。
这是一个有趣的问题，我已经尝试了大量的覆盖，看看我能否得到它，但没有任何工作。 现代浏览器实际上使用他们自己的样式表来告诉元素如何显示，所以也许如果你能够浏览Chrome的样式表，你可以看到他们正在强制的样式表。 我会对结果非常感兴趣，如果你没有这个结果，我会花一点时间在稍后浪费时间。
仅供参考，
opacity: 1!important;
不覆盖它，所以我不知道它是不透明的。
您可以使用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>
注意禁用的input和只读input是不一样的。 只读input可以有焦点，并会在提交时发送值。 看看w3.org
这个问题很老，但我想我会发布一个更新的webkit解决scheme。 只需使用下面的CSS：
input::-webkit-input-placeholder { color: #880000; }
你可以使用一个button，而不是一个input？
<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>
for @ryan
我想我禁用的input框看起来像一个正常的。 这是唯一能在Safari Mobile中工作的东西。
-webkit-text-fill-color: rgba(0, 0, 0, 1); -webkit-opacity: 1; background: white;
