如何通过CSS将处于readonly状态的复选框置灰？

直接用CSS的属性选择器就能精准匹配带有readonly属性的输入框，给它设置置灰样式，具体实现如下：

基础通用写法 #

匹配所有带readonly属性的input元素：

input[readonly] {
  background-color: #e9ecef; /* 常用浅灰色，和主流框架禁用样式对齐 */
  color: #6c757d;
  cursor: not-allowed; /* 鼠标悬停显示禁止图标，增强交互提示 */
}

针对特定类的精准写法 #

如果只想给你代码里的.input-text类生效：

.input-text[readonly] {
  background-color: #f0f0f0;
  opacity: 0.7; /* 用透明度实现置灰效果 */
}

不管你写的是readonly="readonly"还是简写的readonly，这个选择器都能匹配到。如果遇到浏览器默认样式冲突，优先通过提高选择器权重解决（比如加上元素id：#billing_email[readonly]），尽量少用!important。

内容的提问来源于stack exchange，提问作者Nik7