:read-only 伪类失效主因是样式优先级不足或浏览器兼容性差，需用 input:read-only, input[readonly] { border: none; padding: 4px 8px; background-color: #fff; } 精准覆盖，并注意 readonly 属性存在即生效、不可用 el.readonly = false 修改。
只读输入框用 :read-only 去边框，但边框没消失？
直接写 input:read-only { border: none; } 往往无效——因为浏览器默认样式或更高优先级的规则（比如 input:focus、input[type="text"]）会覆盖它。必须确保选择器权重足够，且覆盖所有可能生效的状态。
- 显式加上
!important是最快验证方式（上线前应移除，改用更精准选择器） - 推荐写成
input:read-only, input[readonly] { border: none; }，兼顾伪类和属性匹配 - 如果用了 CSS 框架（如 Bootstrap），检查其
.form-control:read-only是否有预设样式，需针对性覆盖
border: none 后输入框“塌了”？注意内边距和背景
去掉边框后，input 的视觉高度常突然变小，甚至文字贴着容器边缘——这是因为很多默认样式里，border 和 padding 是协同定义尺寸的。单砍 border 会打破这个平衡。
- 务必同步设置
padding（例如padding: 4px 8px;），否则文字挤压、对齐错乱 - 若背景色也透明了，加
background-color: #fff;避免文字在深色父容器里看不清 - 某些浏览器（如 Safari）对
:read-only下的background渲染较保守，建议显式声明
为什么 readonly 属性没触发 :read-only？检查写法和值
:read-only 匹配的是「不可编辑但非 disabled」的状态，它依赖 HTML 属性是否存在，而不是 JS 动态赋值是否生效。
- 正确写法是
<input readonly>或<input readonly="readonly">；readonly=""也行，但readonly="false"仍会被识别为只读（HTML 属性存在即生效） - JS 设置时用
el.setAttribute('readonly', '')，别用el.readonly = false（这会移除属性，不是设值） -
disabled不会触发:read-only，它走的是:disabled，两者样式需分开处理
兼容性与渐进增强：IE 和旧版 Safari 怎么办？
:read-only 在 IE 完全不支持，iOS Safari 10.3+ 才稳定，所以纯靠它做样式降级风险大。
立即学习“前端免费学习笔记（深入）”；
- IE 用户只能靠属性选择器兜底：
input[readonly]兼容到 IE9+ - 若项目需支持 iOS is-readonly），再写
.is-readonly { border: none; } - 别忘了测试 focus 状态：只读输入框不该响应
:focus，但部分浏览器仍会触发，可加input[readonly]:focus { outline: none; }
