Question

如何在css中更改readonly文本框的背景颜色

Answer 1

你的问题中有太多的缺点。您想要哪种浏览器支持？如果你说文本框你似乎使用ASP.NET，但你没有问题。

一般来说，浏览器之间的行为是不同的。

考虑以下html

<html>
      <head>
      </head>
      <body>
             <input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" />
      </body>
</html>

IE8正确渲染背景颜色，但禁用的控件将始终具有带阴影的灰色文本。除此之外的Mozille Firefox使控件正确，我相信不同浏览器甚至浏览器版本之间都会有所不同（IE6也会正确解释颜色值）。

如果你想使用html而不管你使用哪种浏览器，你必须使用span或其他内联元素，用你想要的边框和颜色来格式化它，而不是使用输入元素。

Answer 2

您可以使用

input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }

对于不支持此选择器的旧浏览器，您可以使用jQuery应用类

$(document).ready(function() {
    $("input[disabled="disabled"]").addClass('disabled');
});

除非它一直被禁用，否则你应该提供js来删除类以及用于启用它的js。

Answer 3

你可以试试这个

input:-moz-read-only { /* For Firefox */
    background-color: yellow;
}

input:read-only {
    background-color: yellow;
}

Answer 4

您可以使用此代码更改 css 中的背景颜色，但在此之前请确保您的 html 页面与您的 css 页面链接。

Body {
      Background-color: red;

     }

希望此代码对您有用。

如何在css中更改只读文本框的背景颜色

4 个答案: