Html 如何在css中更改只读文本框的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4321971/
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
How to change background color of readonly textbox in css
提问by reign
How to change background color of readonly textbox in css
如何在css中更改只读文本框的背景颜色
回答by jb_
There are too many unkowns in your question. Which browser do you want support? If you say textbox you seem to use ASP.NET, but there is no tag at you question.
你的问题有太多未知数。您希望支持哪种浏览器？如果您说文本框，您似乎在使用 ASP.NET，但您的问题中没有标签。
Generally said, the behaviour between the browsers are different.
一般来说，浏览器之间的行为是不同的。
Consider the following html
考虑以下html
<html> <head> </head> <body> <input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" /> </body> </html>
<html> <head> </head> <body> <input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" /> </body> </html>
IE8 renders the background color properly, but disabled controls will always have gray text with shadows. Mozille Firefox beside that renders the control correct and i am sure there will be difference all over the different browsers and even between the browser versions (IE6 would interprete the color values correctly too).
IE8 正确呈现背景颜色，但禁用的控件将始终具有带阴影的灰色文本。Mozille Firefox 除了使控件正确呈现之外，我相信不同浏览器甚至浏览器版本之间都会存在差异（IE6 也会正确解释颜色值）。
If you want to have a html regardless which browser you use, you have to use a span or other inline element, to format it with border and colors you want, instead of using a input element.
如果你想拥有一个 html，不管你使用哪种浏览器，你必须使用 span 或其他内联元素，用你想要的边框和颜色来格式化它，而不是使用输入元素。
回答by olemarius
You could use
你可以用
input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }
and for older browser that doesnt support this selector, you can use jQuery to apply a class
对于不支持此选择器的旧浏览器，您可以使用 jQuery 应用类
$(document).ready(function() {
$("input[disabled="disabled"]").addClass('disabled');
});
And unless it's disabled all the time, you should provide js for removing the class along with js for enabling it.
除非它一直被禁用，否则您应该提供用于删除类的 js 以及用于启用它的 js。
回答by Mark Gerryl Mirandilla
you can try this
你可以试试这个
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
