CSS阻止文本選擇

時間 2019-12-12

標籤 css 阻止文本選擇欄目 CSS 简体版

原文原文鏈接

　　在平常運用中，常常遇到點擊按鈕/菜單的時候，選中了文本，爲了不這種狀況，能夠使用純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以下：css

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

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

　　結果是：p標籤的文字不能選中，dt的文字則能正常選中。html

相關標籤/搜索