CSS阻止文本选择

浏览数：29 / 时间：2015年06月09日 
　　在日常运用中，经常遇到点击按钮/菜单的时候，选中了文本，为了避免这种情况，可以使用纯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的文字则能正常选中。

　　

 

 



          

            

              
              郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
            

          


          


          

            标签： 
            class
            
            style
            
            html
            
            使用
            
            问题
            
            log
            
            js
            
            si
            
            for
            
            class
            
            style
            
            html
            
            使用
            
            问题
            
            log
            
            js
            
            si
            
            for
            
            
            
          


          

            

              
相关文章

              
    
                
              

            

            

              
随机文章

              
            

          



          

            

              
您可能还喜欢

              
    
                
              

            


            

              
您可能还喜欢