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></textarea> 都不会被 :read-only 匹配。
-
:read-only实际匹配的是：未设置contenteditable、且没有disabled、但内容不能由用户修改的元素（例如<input readonly>、<textarea readonly></textarea>） -
<input disabled>不匹配:read-only，它走的是:disabled -
contenteditable="false"的<div> 会匹配 <code>: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 属性，最省心。
- 必须写成
