CSS如何使用:read-only伪类设置只读框样式_通过状态区分展示与编辑状态-css教程-PHP中文网

:read-only未生效是因为仅显式设置html readonly 属性（如setattribute('readonly', '')）的或才匹配，disabled、contenteditable="false"或仅js赋值el.readonly = true无效；等不支持该伪类。

css如何使用:read-only伪类设置只读框样式_通过状态区分展示与编辑状态

为什么`:read-only`没生效？检查表单控件是否真被设为只读

很多情况下样式不触发，不是选择器写错，而是元素根本没进入:read-only状态。HTML里只有显式设置了readonly属性的<input>或<textarea></textarea>才算——disabled不算，contenteditable="false"也不算，JS动态赋值element.readOnly = true可以，但必须在DOM中真实存在该属性（el.setAttribute('readonly', '')更稳妥）。

常见错误现象：:read-only样式在编辑态切换后不更新，往往是因为用JS删了readonly属性但没同步移除class，或用了disabled误以为等价。

readonly属性必须是HTML属性，不是JS属性；仅设el.readOnly = true不够，需el.setAttribute('readonly', '')
<select></select>、<button></button>、自定义组件不支持:read-only，别白费劲
Vue/React中用v-bind:readonly或readOnly={true}能正确渲染属性，但要确认最终DOM里真有readonly字样

`:read-only`和`:disabled`样式能共存吗？优先级与交互差异必须分清

能共存，但行为完全不同：:disabled会禁用焦点、阻止事件、灰化外观；:read-only只是禁止编辑，仍可聚焦、可选中文本、可触发表单验证。样式上，两者无天然优先级，谁在CSS里写在后面谁覆盖前面——但更关键的是，别把它们混着用。

使用场景：展示页需要用户复制字段内容（如订单号），又不能修改，就用readonly + :read-only加浅色背景+光标变成default；而彻底不让碰的配置项，才用disabled。

同时写了input:read-only { background: #f5f5f5; }和input:disabled { opacity: 0.6; }，若某输入框既readonly又disabled，:disabled规则会生效（因disabled属性优先级更高）
:read-only下cursor: text是默认值，想禁用文本选择得额外加user-select: none
Safari对:read-only的支持从iOS 15.4 / macOS 12.3开始稳定，老版本可能完全忽略

如何用`:read-only`配合`:not(:read-only)`做状态切换？别漏掉:focus-visible

纯靠:read-only只能样式只读态，但真实业务里常要“点击变可编辑”，这时得靠JS切状态，再用:not(:read-only)配编辑态样式。重点是：别忘了聚焦时的视觉反馈——尤其键盘用户依赖:focus-visible。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

性能影响很小，但兼容性要注意：:not(:read-only)在IE全系不支持，不过IE本身就不支持:read-only，所以实际无需降级。

推荐组合：input:read-only { background: #fafafa; } input:not(:read-only) { background: #fff; } input:not(:read-only):focus-visible { outline: 2px solid #007bff; }
避免写input[readonly]代替:read-only——前者只匹配带readonly属性的元素，后者匹配所有只读状态（包括JS设置的）
如果用CSS-in-JS（如Emotion），确保它支持:read-only伪类解析，部分旧版会直接丢弃

Vue/React里动态控制`:read-only`样式，为什么class切换比属性切换更可靠？

因为框架对readonly这种布尔属性的绑定逻辑不一致：Vue的:readonly="isEditing"会在isEditing为false时**移除属性**，触发:read-only退出；但React的readOnly={isEditing}在false时会设成readOnly="false"（字符串），导致DOM里仍有readonly属性，:read-only一直生效。

容易踩的坑就在这儿：React里看似关了只读，样式却没变，其实是属性没清干净。

React推荐方案：用readOnly={isEditing ? undefined : true}，或更干脆，用className控制样式，不依赖伪类
Vue里v-bind:readonly没问题，但注意v-model在readonly状态下仍会响应数据更新，只是不响应输入——样式和逻辑要分开想
服务端渲染（SSR）时，初始readonly属性必须和服务端状态一致，否则hydration mismatch会导致样式闪动

最复杂的点其实不在CSS，而在状态同步：JS改了只读属性，CSS立刻响应；但CSS变了，JS并不知道。所以判断当前是否只读，永远以DOM属性为准，别信class名或样式颜色。