readonly 属性应使用 [readonly] 属性选择器而非 :read-only 伪类来设置样式，因为 :read-only 匹配逻辑复杂且兼容性差，而 [readonly] 行为确定、兼容性好，且需注意 readonly 是布尔属性，有即生效，不可设为 "false"。
readonly 属性不触发 :read-only 伪类？
很多开发者以为给 <input readonly> 加上 :read-only 就能直接生效，结果样式没反应——这是因为 :read-only 是 CSS 伪类，它只匹配「内容不可编辑」的元素，但浏览器对它的判定逻辑和 HTML readonly 属性不是完全等价的。比如 <input type="hidden"> 或 <textarea disabled> 都不会被 :read-only 匹配。
-
:read-only实际匹配的是：未设置contenteditable、且没有disabled、但内容不能由用户修改的元素（例如<input readonly>、<textarea readonly>） -
<input disabled>不匹配:read-only，它走的是:disabled -
contenteditable="false"的<div>会匹配:read-only，但原生表单控件中较少这么用
如何可靠地为 readonly 输入框设置样式
最稳妥的方式是**显式使用属性选择器**，而不是依赖 :read-only。因为 readonly 是 HTML 属性，CSS 支持 [readonly] 这种属性存在性匹配，兼容性好、行为确定。
input[readonly],
textarea[readonly] {
background-color: #f5f5f5;
color: #666;
border-color: #ddd;
cursor: not-allowed;
}- 必须写成
[readonly]，不是[readonly="true"]—— HTML 中readonly是布尔属性，有该属性即生效，值为空或任意字符串都算存在 - 不要漏掉
textarea，它也支持readonly，但常被忽略 - 加上
cursor: not-allowed能直观提示用户不可编辑，比仅改背景色更友好
:read-only 和 [readonly] 的实际差异示例
下面这段 HTML 在不同浏览器中，:read-only 可能不生效，但 [readonly] 一定生效：
<input type="text" value="只读文本" readonly> <textarea readonly>多行只读</textarea> <input type="text" value="禁用文本" disabled>
对应 CSS 建议这样写才保险：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 推荐：明确、稳定 */
input[readonly],
textarea[readonly] {
opacity: 0.8;
}
<p>/<em> ❌ 不推荐：部分老浏览器（如 IE11）不支持 :read-only </em>/
:read-only {
opacity: 0.8;
}</p><p>/<em> ⚠️ 注意：disabled 是另一回事，需单独处理 </em>/
input:disabled,
textarea:disabled {
background-color: #eee;
}动态切换 readonly 状态时样式的更新问题
用 JavaScript 切换 element.readonly = true/false 时，[readonly] 选择器会立即响应，但要注意：如果用 setAttribute('readonly', '') 或 removeAttribute('readonly')，也完全 OK；而用 element.setAttribute('readonly', 'false') 是无效的——这不会移除只读状态，反而会让属性值变成字符串 "false"，导致 [readonly] 依然匹配。
- 正确设置只读：
input.readonly = true或input.setAttribute('readonly', '') - 正确取消只读：
input.readonly = false或input.removeAttribute('readonly') - 避免写
setAttribute('readonly', 'false')，它会让元素保持只读
readonly 样式本身很简单，但容易卡在“为什么伪类不生效”这个点上。关键不是记住哪个伪类，而是理解浏览器怎么判断可编辑性——直接锚定 HTML 属性，最省心。
