首页 > 代码库 > CSS阻止文本选择

CSS阻止文本选择

2024-07-24 07:42:05   216人阅读

　　在日常运用中，经常遇到点击按钮/菜单的时候，选中了文本，为了避免这种情况，可以使用纯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阻止文本选择






























        

            
                
                  
                
                

                    联系

                    我们