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

顺亿

2026-11-15 • 👁 0人浏览过

:read-only仅匹配（文本类type）和

，不匹配<select>、<button>或contenteditable元素；只认DOM中真实存在的readonly布尔属性，JS赋值el.readOnly=true无效，须用setAttribute('readonly', '')。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
是唯一对应
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">readonly</code></div>
属性的 CSS 伪类，但它只对原生支持该属性的表单控件生效，且行为比你想象中更“较真”。
哪些元素能真正匹配
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
只有两类元素会被识别：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><input></code></div>
，但必须是文本类类型（如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="text"</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="email"</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="number"</code></div>
），
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="checkbox"</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="hidden"</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">type="range"</code></div>
都不匹配
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><textarea></code></div>
—— 常被遗漏，但它完全支持
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><select></code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><button></code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div contenteditable="false"></code></div>
即使手动加了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">readonly</code></div>
属性，浏览器也直接忽略，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
永远不会命中。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
生效的硬性条件
它不看 JS 赋值，只认 DOM 属性是否真实存在：
立即学习
“
前端免费学习笔记（深入）
”；
必须用布尔写法：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><input readonly></code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.setAttribute('readonly', '')</code></div>
；写成
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">readonly="false"</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">readonly="disabled"</code></div>
都算“存在”，照样匹配
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.readOnly = true</code></div>
不足以触发样式，除非同时调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.setAttribute('readonly', '')</code></div>
移除时必须用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.removeAttribute('readonly')</code></div>
，仅设
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.readOnly = false</code></div>
不会清除样式
DevTools 里检查 Elements 面板，确认
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">readonly</code></div>
字样确实出现在标签上，而不是只在 JS 里赋值了。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">[readonly]</code></div>
属性选择器的区别
两者常被混用，但机制完全不同：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input[readonly]</code></div>
：只要 HTML 属性存在就匹配，不管值是什么，也不管元素是否真的可编辑
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input:read-only</code></div>
：由浏览器根据当前状态判定，JS 执行
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">el.readOnly = false</code></div>
后样式立刻失效
优先级上
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
>
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">[readonly]</code></div>
，但没必要共存；若需兼容旧版 Firefox，得补
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">input:-moz-read-only</code></div>
，IE 则只能退回到
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">[readonly]</code></div>
真正容易被忽略的是：伪类只是样式钩子，不控制行为——用户仍可聚焦、选中、右键粘贴，禁用这些得靠额外监听或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">tabindex="-1"</code></div>
+
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">user-select: none</code></div>
。
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:disabled</code></div>
混用时的视觉陷阱
如果一个
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><input readonly disabled></code></div>
，它同时满足两个伪类，但结果不是叠加，而是覆盖：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:disabled</code></div>
样式一定胜出，哪怕你把
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
写在后面
灰色文字、无边框、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">opacity</code></div>
降低等效果会盖掉你为
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
设的浅灰背景或锁图标
语义上二者冲突：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">readonly</code></div>
表示“值要提交、可复制”，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">disabled</code></div>
表示“彻底不参与表单”，别为了“看起来更禁用”而同时加
实际项目里，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">:read-only</code></div>
最适合做轻量级状态提示，比如加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">cursor: not-allowed</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">background-color: #f5f5f5</code></div>
，但别指望它替你做交互拦截或兼容兜底。
                            </div>

<nav class="cxy-article-nav" aria-label="文章导航">

<a href="https://www.vqhf.com/article/41879.html" class="cxy-article-nav-link cxy-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="cxy-article-nav-label">上一篇</div>
                                        <div class="cxy-article-nav-title">CSS字体属性font: 14px/20px到底是什么意思？</div>
                                    </div>
                                </a>

<a href="https://www.vqhf.com/article/41902.html" class="cxy-article-nav-link cxy-article-nav-next">
                                    <div>
                                        <div class="cxy-article-nav-label">下一篇</div>
                                        <div class="cxy-article-nav-title">html5嵌入页面缓存不刷新_html5嵌入页缓存清除法【方案】</div>
                                    </div>
                                    <span>›</span>
                                </a>

</nav>
                        </div>
                    </article>

<section class="cxy-content-section" style="margin-top: 20px;">
                        <h2 class="cxy-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="cxy-article-list">

<li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41879.html" class="cxy-article-link">CSS字体属性font: 14px/20px到底是什么意思？</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41878.html" class="cxy-article-link">快速掌握静态相对定位的技巧与方法</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41820.html" class="cxy-article-link">JQuery中DOM事件冒泡实例分析_jquery</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41819.html" class="cxy-article-link">nodejs生产环境部署vue</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41818.html" class="cxy-article-link">html怎么运行script_html中运行script脚本方法【教程】</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41815.html" class="cxy-article-link">hbuilder如何运行html_HBuilder开发工具HTML调试与运行方法</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41902.html" class="cxy-article-link">html5嵌入页面缓存不刷新_html5嵌入页缓存清除法【方案】</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41908.html" class="cxy-article-link">如何给网页的body设置CSS样式？</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41911.html" class="cxy-article-link">Electron渲染进程与WebView如何实现高效同步交互？</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>
    
                            <li class="cxy-article-item">
                                <a href="https://www.vqhf.com/article/41915.html" class="cxy-article-link">Mongoose updateOne 深度解析：处理复杂字段与鉴别器更新策略</a>
                                <div class="cxy-article-meta">2026-11-15</div>
                            </li>

</ul>
                    </section>
                </div>

<aside class="cxy-sidebar cxy-sidebar-right" aria-label="侧边栏">
    
    <div class="cxy-widget">
        <h3 class="cxy-widget-title">推荐阅读</h3>
        <div class="cxy-recommend-grid">

<a href="https://www.vqhf.com/article/41915.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="Mongoose updateOne 深度解析：处理复杂字段与鉴别器更新策略">
                </div>
                <div class="cxy-recommend-title">Mongoose updateOne 深度解析：处理复杂字段与鉴别器更新策略</div>
            </a>
    
            <a href="https://www.vqhf.com/article/41911.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="Electron渲染进程与WebView如何实现高效同步交互？">
                </div>
                <div class="cxy-recommend-title">Electron渲染进程与WebView如何实现高效同步交互？</div>
            </a>
    
            <a href="https://www.vqhf.com/article/41908.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="如何给网页的body设置CSS样式？">
                </div>
                <div class="cxy-recommend-title">如何给网页的body设置CSS样式？</div>
            </a>
    
            <a href="https://www.vqhf.com/article/41902.html" class="cxy-recommend-item">
                <div class="cxy-recommend-thumb">
                    <img src="https://www.vqhf.com/static/v0/images/article-6.jpg" alt="html5嵌入页面缓存不刷新_html5嵌入页缓存清除法【方案】">
                </div>
                <div class="cxy-recommend-title">html5嵌入页面缓存不刷新_html5嵌入页缓存清除法【方案】</div>
            </a>

</div>
    </div>

<div class="cxy-widget">
        <h3 class="cxy-widget-title">最新文章</h3>
        <ul class="cxy-article-list">

<li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41915.html" class="cxy-article-link">Mongoose updateOne 深度解析：处理复杂字段与鉴别器更新策略</a>
                <div class="cxy-article-meta">2026-11-15</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41911.html" class="cxy-article-link">Electron渲染进程与WebView如何实现高效同步交互？</a>
                <div class="cxy-article-meta">2026-11-15</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41908.html" class="cxy-article-link">如何给网页的body设置CSS样式？</a>
                <div class="cxy-article-meta">2026-11-15</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41902.html" class="cxy-article-link">html5嵌入页面缓存不刷新_html5嵌入页缓存清除法【方案】</a>
                <div class="cxy-article-meta">2026-11-15</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41891.html" class="cxy-article-link">HTML input的readonly属性在CSS中的伪类？样式化只读输入框</a>
                <div class="cxy-article-meta">2026-11-15</div>
            </li>
    
            <li class="cxy-article-item">
                <a href="https://www.vqhf.com/article/41879.html" class="cxy-article-link">CSS字体属性font: 14px/20px到底是什么意思？</a>
                <div class="cxy-article-meta">2026-11-15</div>
            </li>

</ul>
    </div>

<div class="cxy-widget">
        <h3 class="cxy-widget-title">热门标签</h3>
        <div class="cxy-article-tag-list">

</div>
    </div>
</aside>
            </div>
        </div>
    </main>

<footer class="cxy-footer">
        <div class="cxy-container">
            <div class="cxy-footer-links" style="justify-content: center;">
                
                
                <a href="https://www.vqhf.com/22.html" class="cxy-footer-link">免责声明</a>
                
                <a href="https://www.vqhf.com/23.html" class="cxy-footer-link">关于我们</a>
                
                <a href="https://www.vqhf.com/24.html" class="cxy-footer-link">联系我们</a>
                
                <a href="https://www.vqhf.com/25.html" class="cxy-footer-link">投诉删除</a>
                
                <a href="https://www.vqhf.com/26.html" class="cxy-footer-link">投稿须知</a>
                
                
            </div>
            <div class="cxy-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 趣航编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063733号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

<button class="cxy-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

<script src="https://www.vqhf.com/static/v0/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
<script>
(function() {
  var al = document.createElement("script");
  al.src = "/api/log?action=views&code=200&id=41891&path=http%3A%2F%2Fwww.vqhf.com%2Farticle%2F41891.html&type=archive&nonce="+Date.now();
  document.body.appendChild(al);
})();
</script>

</html>