Html 禁用输入文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/262158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabled input text color
提问by Incidently
The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).
下面的简单 HTML 在 Firefox 和基于 WebKit 的浏览器中显示不同（我检查了 Safari、Chrome 和 iPhone）。
In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it had some transparency applied to it).
在 Firefox 中，边框和文本具有相同的颜色 ( #880000)，但在 Safari 中，文本变得更亮一些（好像它应用了一些透明度）。
Can I somehow fix this (remove this transparency in 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>
回答by Kemo
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
回答by lijinma
Phone and Tablet webkit browsers (Safari and Chrome) and desktop IE have a number of default changes to disabled form elements that you'll need to override if you want to style disabled inputs.
手机和平板电脑 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 */
回答by Steve Perks
it's an interesting question and I've tried plenty of overrides to see if I can get it going, but nothing's working. Modern browsers actually use their own style sheets to tell elements how to display, so maybe if you can sniff out Chrome's stylesheet you can see what styles they're forcing on to it. I'll be very interested in the result and if you don't have one I'll spend a little time myself looking for it later when I have some time to waste.
这是一个有趣的问题，我已经尝试了很多覆盖，看看我是否可以让它继续，但没有任何效果。现代浏览器实际上使用他们自己的样式表来告诉元素如何显示，所以也许如果你能嗅出 Chrome 的样式表，你就可以看到它们强制使用什么样式。我会对结果非常感兴趣，如果你没有结果，我会花一点时间自己寻找，以后有时间可以浪费。
FYI,
供参考，
opacity: 1!important;
doesn't override it, so I'm not sure it's opacity.
不会覆盖它，所以我不确定它是不透明的。
回答by Kornel
You could change color to #440000just for Safari, but IMHO the best solution would be not tochange looks of button at all. This way, in every browser on every platform, it will look just like users expect it to.
你可以改变颜色，#440000只为Safari浏览器，但恕我直言最好的解决办法是不扣的变化看起来在所有。这样，在每个平台上的每个浏览器中，它看起来就像用户期望的那样。
回答by paulcol.
UPDATED 2019:
2019 年更新：
Combining ideas from this page into a "set and forget" solution.
将本页中的想法组合成一个“一劳永逸”的解决方案。
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 */
}
回答by Serxipc
You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input:readonly.
您可以使用 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>
Beware that a disabled input and readonly input aren't the same. A readonly input can have focus, and will send values on submit. Look at w3.org
请注意，禁用输入和只读输入不同。只读输入可以有焦点，并在提交时发送值。看看w3.org
回答by vanduc1102
for @ryan
对于@ryan
I wanted my disabled input box to look like a normal one. This is the only thing that would work in Safari Mobile.
我希望我的禁用输入框看起来像一个正常的输入框。这是唯一可以在 Safari Mobile 中使用的东西。
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
回答by Freez
If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-colorto currentcolor, so the colorproperty of the input will be used.
如果要修复所有禁用输入的问题，可以定义-webkit-text-fill-colorto currentcolor，因此color将使用输入的属性。
input[disabled] {
-webkit-text-fill-color: currentcolor;
}
See that fiddle on Safari https://jsfiddle.net/u549yk87/3/
在 Safari https://jsfiddle.net/u549yk87/3/上看到那个小提琴
回答by conceptDawg
This question is very old but I thought that I would post an updated webkit solution. Just use the following CSS:
这个问题很老了，但我想我会发布一个更新的 webkit 解决方案。只需使用以下 CSS：
input::-webkit-input-placeholder {
color: #880000;
}
回答by conceptDawg
Can you use a button instead of an 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>
