css 表单只读状态如何区分样式_使用 read only 伪类设置样式

readonly 属性应使用 [readonly] 属性选择器而非 :read-only 伪类来设置样式，因为 :read-only 匹配逻辑复杂且兼容性差，而 [readonly] 行为确定、兼容性好，且需注意 readonly 是布尔属性，有即生效，不可设为 "false"。

readonly 属性不触发 :read-only 伪类？

很多开发者以为给 加上 :read-only 就能直接生效，结果样式没反应——这是因为 :read-only 是 CSS 伪类，它只匹配「内容不可编辑」的元素，但浏览器对它的判定逻辑和 HTML readonly 属性不是完全等价的。比如 或 都不会被 :read-only 匹配。

• :read-only 实际匹配的是：未设置 contenteditable、且没有 disabled、但内容不能由用户修改的元素（例如 、）
• 不匹配 :read-only，它走的是 :disabled
• contenteditable="false" 的
  会匹配 :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] 一定生效：

  
  多行只读
  

  对应 CSS 建议这样写才保险：

  

  医真AI+开放平台

  医真AI+ 医学AI开放平台

  下载

  立即学习“前端免费学习笔记（深入）”；

  /* ✅ 推荐：明确、稳定 */
  input[readonly],
  textarea[readonly] {
    opacity: 0.8;
  }
  / ❌ 不推荐：部分老浏览器（如 IE11）不支持 :read-only /
  :read-only {
  opacity: 0.8;
  }
  / ⚠️ 注意：disabled 是另一回事，需单独处理 /
  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 属性，最省心。