问如何使用CSS设置只读属性的样式？

EN

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

这里有很多答案，但我还没有看到我使用的答案：

input[type="text"]:read-only { color: blue; }

注意伪选择器中的破折号。如果输入是readonly="false"，它也会捕获它，因为无论值是什么，这个选择器都会捕获只读的存在。从技术上讲，根据规范，false是无效的，但互联网并不是一个完美的世界。如果你需要介绍这种情况，你可以这样做：

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea的工作方式与此相同：

textarea:read-only:not([read-only="false"]) { color: blue; }

请记住，html现在不仅支持type="text"，还支持许多其他文本类型，如number、tel、email、date、time、url等，每个文本类型都需要添加到选择器中。

有几种方法可以做到这一点。

第一种是使用最广泛的。它可以在所有主流浏览器上运行。

input[readonly] {
 background-color: #dddddd;
}

虽然上面的一个将选择所有附加了readonly的输入，但下面的这个将只选择您想要的。确保将demo替换为您想要的任何输入类型。

input[type="demo"]:read-only {
 background-color: #dddddd;
}

这是第一种方法的替代方法，但并不是很常用：

input:read-only {
 background-color: #dddddd;
}

:read-only选择器在Chrome、Opera和Safari中都受支持。火狐使用:-moz-read-only。IE不支持:read-only选择器。

您也可以使用input[readonly="readonly"]，但根据我的经验，这与input[readonly]非常相似。