码迷,mamicode.com
首页 > Web开发 > 详细

CSS阻止文本选择

时间:2014-09-25 13:08:08      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   ar   for   div   sp   art   

  在日常运用中,经常遇到点击按钮/菜单的时候,选中了文本,为了避免这种情况,可以使用纯css来解决这个问题(IE10+),对于旧版本的就只能用js:onselectstart = ‘return false;‘这种方式。以下介绍一下-prefix-user-select:
Formal syntax: none | text | all | element 
(-prefix-)user-select: none;  //全部都不可选择
(-prefix-)user-select: text;  //允许文本选择
(-prefix-)user-select: all;  //In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
(-prefix-)user-select: element;  //只有IE ff支持,无视……

注意这属性不属于w3c标准!
  目前主要使用的是none & text
  假定结构如下:
<body>
    <nav>
        <dt>level 1</dt>
    </nav>    
    <p>xxxxxxxxxxxxxxxxxxxx</p>
</body>    

  CSS如下:

body{
    -webkit-user-select: none;
}    

nav dt{
    -webkit-user-select: text;
}

  结果是:p标签的文字不能选中,dt的文字则能正常选中。

  

 

 

CSS阻止文本选择

标签:style   blog   color   使用   ar   for   div   sp   art   

原文地址:http://www.cnblogs.com/viccici/p/3992195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!