首页 > 代码库 > CSS实现禁止文字选中

CSS实现禁止文字选中

2024-10-17 20:28:39   213人阅读

E10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持，Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本。

user-select：none | text | all | element

  • text – 可以选择文本
  • element – 可以选择文本，但选择范围受元素边界的约束
  • none – 不可以选择文本
  • auto – 如果该元素包含可编辑的文本（如输入元素或可编辑内容的元素），则可以选择文本。否则，元素内容是否可选择由父节点的值决定。
 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6   <title>主页</title>
 7   <style type="text/css">
 8       .row-of-icons {
 9         -webkit-user-select: none; /* Chrome all / Safari all */
10         -moz-user-select: none; /* Firefox all */
11         -ms-user-select: none; /* IE 10+ *//* No support for these yet, use at own risk */
12         -o-user-select: none;
13         user-select: none; 
14         }
15   </style>
16 </head>
17 <body> 
18 <div class="row-of-icons" onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>
19 </body>
20 </html>

 

CSS实现禁止文字选中


联系
我们