HTML input的readonly属性在CSS中的伪类？样式化只读输入框-html教程-PHP中文网

:read-only仅匹配（文本类type）和，不匹配、或contenteditable元素；只认dom中真实存在的readonly布尔属性，js赋值el.readonly=true无效，须用setattribute('readonly', '')。

html input的readonly属性在css中的伪类？样式化只读输入框

:read-only 是唯一对应 readonly 属性的 CSS 伪类，但它只对原生支持该属性的表单控件生效，且行为比你想象中更“较真”。

哪些元素能真正匹配 `:read-only`

只有两类元素会被识别：

<input>，但必须是文本类类型（如 type="text"、type="email"、type="number"），type="checkbox"、type="hidden"、type="range" 都不匹配
<textarea></textarea> —— 常被遗漏，但它完全支持

<select></select>、<button></button>、<div contenteditable="false"> 即使手动加了 <code>readonly 属性，浏览器也直接忽略，:read-only 永远不会命中。

`:read-only` 生效的硬性条件

它不看 JS 赋值，只认 DOM 属性是否真实存在：

必须用布尔写法：<input readonly> 或 el.setAttribute('readonly', '')；写成 readonly="false" 或 readonly="disabled" 都算“存在”，照样匹配
el.readOnly = true 不足以触发样式，除非同时调用 el.setAttribute('readonly', '')
移除时必须用 el.removeAttribute('readonly')，仅设 el.readOnly = false 不会清除样式

DevTools 里检查 Elements 面板，确认 readonly 字样确实出现在标签上，而不是只在 JS 里赋值了。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

和 `[readonly]` 属性选择器的区别

两者常被混用，但机制完全不同：

input[readonly]：只要 HTML 属性存在就匹配，不管值是什么，也不管元素是否真的可编辑
input:read-only：由浏览器根据当前状态判定，JS 执行 el.readOnly = false 后样式立刻失效
优先级上 :read-only > [readonly]，但没必要共存；若需兼容旧版 Firefox，得补 input:-moz-read-only，IE 则只能退回到 [readonly]

真正容易被忽略的是：伪类只是样式钩子，不控制行为——用户仍可聚焦、选中、右键粘贴，禁用这些得靠额外监听或 tabindex="-1" + user-select: none。