CSS如何禁止用户选中文本_使用user-selectnone属性

陆砚码
2026-10-15 • 👁 0人浏览过
Chrome、Firefox、Safari（10.1+）、Edge（12+）均支持 user-select: none；Safari 旧版本（<10.1）不支持或仅部分支持该属性。 user-select: none 在哪些浏览器里真正生效 Chrome、Firefox、Safari（10.1+）、Edge（12+）都支持
user-select: none
，但 Safari 旧版本（-ms-user-select: none 前缀才管用。如果你的用户还有大量 IE11 或老版 macOS 用户，光写标准属性会失效。必须同时写
user-select: none
和
-ms-user-select: none
才能覆盖 IE11 Safari 9 及更早版本对
user-select
完全无视，只能靠 JS 拦截
selectstart
事件补救移动端 iOS Safari 对
user-select: none
的响应有延迟，长按后仍可能短暂高亮为什么给 div 加了 user-select: none 还能被选中常见原因是样式没生效或被更高优先级规则覆盖。比如父元素设了
user-select: text
，子元素即使写了
none
也会继承 ——
user-select
是可继承属性，不是自动“穿透”的。检查 computed styles，确认目标元素上实际生效的是
none
，而不是 inherited 或 unset 避免依赖继承：直接在目标元素上写
user-select: none
，别只写在父级如果用了 CSS-in-JS 或 scoped style（如 Vue），注意选择器权重是否足够，有时需要加
!important
（虽然不推荐，但这里实用）某些富文本编辑器（如 Quill、Tiptap）会主动重置该样式，得在它们的 class 上再覆盖一遍禁用选中后，input 和 textarea 里的文字也选不了怎么办
user-select: none
是全局生效的，一旦父容器设了它，里面的
、
</code></div>
也会失去文本选择能力 —— 这显然违背交互直觉。
使用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">input, textarea { user-select: text; }</code></div>
如果用了 Web Components 或 Shadow DOM，需在 shadow root 内部也声明
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">user-select: text</code></div>
，外部样式不会穿透
React 中用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">contentEditable</code></div>
的 div 也要单独处理，它不走表单样式逻辑，得显式设
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">user-select: text</code></div>
用 JavaScript 拦截 selectstart 是不是更可靠
纯 CSS 有兼容和穿透问题，JS 方案（监听
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">selectstart</code></div>
并
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">preventDefault()</code></div>
）确实能兜底，但副作用明显：它会阻止所有选择行为，包括用户想复制按钮文字、调试时选中 DOM 节点等。
立即学习
“
前端免费学习笔记（深入）
”；
仅在 CSS 失效的场景下作为 fallback，不要默认启用
绑定事件时用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">{ capture: true }</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">textarea</code></div>
和带
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">contenteditable="true"</code></div>
的元素，否则破坏基础交互
移动端要额外监听
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">touchstart</code></div>
+
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">preventDefault()</code></div>
，因为
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">selectstart</code></div>
在 iOS 上触发不稳定
CSS 禁用选中看着简单，真正上线时最麻烦的往往是那些“本不该被影响却意外失效”的角落 —— 比如一个被遗忘的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">contenteditable</code></div>
区域，或者某段第三方组件注入的内联样式。
                            </div>

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

    
                                <a href="http://www.phpwebsoft.com/news/24433.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">上一篇</div>
                                        <div class="phpwebsoft-article-nav-title">如何用 Array.prototype.findLast() 结合业务权重在活动列表中检索最后一个生效的配置</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.phpwebsoft.com/news/24439.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-next">
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">下一篇</div>
                                        <div class="phpwebsoft-article-nav-title">如何使用JavaScript进行网络请求_fetch API和XMLHttpRequest有什么区别呢</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

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

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

    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24433.html" class="phpwebsoft-article-link">如何用 Array.prototype.findLast() 结合业务权重在活动列表中检索最后一个生效的配置</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24357.html" class="phpwebsoft-article-link">如何解决CSS浮动元素导致的文本选择困难_调整层级与pointer-events</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24346.html" class="phpwebsoft-article-link">如何优化css超长列表滚动的性能开销_开启css-containment提升渲染效率</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24329.html" class="phpwebsoft-article-link">怎样使用vue.js中v-model指令实现数据双向绑定</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24328.html" class="phpwebsoft-article-link">怎么使用HTML5中Canvas绘制算法实现网页版的动态波束搜索视觉指引</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24327.html" class="phpwebsoft-article-link">html怎么做搜索框自动补全_html搜索框autocomplete自动补全实现【干货】</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24273.html" class="phpwebsoft-article-link">js中如何实现表单验证</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24439.html" class="phpwebsoft-article-link">如何使用JavaScript进行网络请求_fetch API和XMLHttpRequest有什么区别呢</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24444.html" class="phpwebsoft-article-link">label标签有什么用_表单控件关联技巧【指南】</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/24449.html" class="phpwebsoft-article-link">html视频代码怎么获取</a>
                                <div class="phpwebsoft-article-meta">2026-10-15</div>
                            </li>
    

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

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

    
            <a href="http://www.phpwebsoft.com/news/24449.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="html视频代码怎么获取">
                </div>
                <div class="phpwebsoft-recommend-title">html视频代码怎么获取</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/24444.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="label标签有什么用_表单控件关联技巧【指南】">
                </div>
                <div class="phpwebsoft-recommend-title">label标签有什么用_表单控件关联技巧【指南】</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/24439.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="如何使用JavaScript进行网络请求_fetch API和XMLHttpRequest有什么区别呢">
                </div>
                <div class="phpwebsoft-recommend-title">如何使用JavaScript进行网络请求_fetch API和XMLHttpRequest有什么区别呢</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/24438.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="CSS如何禁止用户选中文本_使用user-selectnone属性">
                </div>
                <div class="phpwebsoft-recommend-title">CSS如何禁止用户选中文本_使用user-selectnone属性</div>
            </a>
    

        </div>
    </div>

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

    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/24449.html" class="phpwebsoft-article-link">html视频代码怎么获取</a>
                <div class="phpwebsoft-article-meta">2026-10-15</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/24444.html" class="phpwebsoft-article-link">label标签有什么用_表单控件关联技巧【指南】</a>
                <div class="phpwebsoft-article-meta">2026-10-15</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/24439.html" class="phpwebsoft-article-link">如何使用JavaScript进行网络请求_fetch API和XMLHttpRequest有什么区别呢</a>
                <div class="phpwebsoft-article-meta">2026-10-15</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/24438.html" class="phpwebsoft-article-link">CSS如何禁止用户选中文本_使用user-selectnone属性</a>
                <div class="phpwebsoft-article-meta">2026-10-15</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/24433.html" class="phpwebsoft-article-link">如何用 Array.prototype.findLast() 结合业务权重在活动列表中检索最后一个生效的配置</a>
                <div class="phpwebsoft-article-meta">2026-10-15</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/24391.html" class="phpwebsoft-article-link">JavaScript中5个重要的Observer函数小结</a>
                <div class="phpwebsoft-article-meta">2026-10-15</div>
            </li>
    

        </ul>
    </div>

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

    
            <a href="http://www.phpwebsoft.com/tag/1684" class="phpwebsoft-article-tag-item">css</a>
    

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


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

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

    <!-- 公共脚本 -->
    <script src="http://www.phpwebsoft.com/static/v10/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>