【转】css禁止文字被选中

最新推荐文章于 2025-02-07 01:13:59 发布

大狗狗

最新推荐文章于 2025-02-07 01:13:59 发布

阅读量348

点赞数

分类专栏： html css js

html css js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何通过CSS和JavaScript禁用网页上的文本选中功能，以提升用户体验，特别是在使用a标签模拟按钮的情况下，防止双击时选中文字。文章详细解释了不同浏览器的CSS属性设置，并提供了IE6-9的JavaScript解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：http://www.cnblogs.com/hkx520/p/7617410.html

有时候，为了让用户有更好的体验，需要禁用掉文本选中功能

比如：使用a标签模拟按钮，如果不禁用掉文本选中功能，那么双击时会选中文字，用起来很不爽。

多数情况下，只需要使用CSS样式就可以实现这个功能啦：

body{
  -o-user-select: none;
  -moz-user-select: none; /*火狐 firefox*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10+*/
  -khtml-user-select :none; /*早期的浏览器*/
  user-select: none; 
}

user-select有四个值：

　　none：文本不能被选择

　　text：可以选择文本

　　all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

　　element：可以选择文本，但选择范围受元素边界的约束

值得注意的是：IE6-9目前需要通过JavaScript来实现：

document.body.onselectstart = document.body.ondrag = function(){
 　 return false;
}