1. 程式人生 > >CSS.text不被選中

CSS.text不被選中

table tab meta start values class ron 另一個 chrome

1、

    text
    {
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit瀏覽器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期瀏覽器*/
        -o-user-select: none; /* Opera*/
        user-select: none;
    }

2、user-select - CSS3參考手冊.html(http://www.css88.com/book/css/properties/user-interface/user-select.htm)

語法:

user-select:none | text | all | element

默認值:text

適用於:除替換元素外的所有元素

繼承性:無

動畫性:否

計算值:指定值

取值:

none:
文本不能被選擇
text:
可以選擇文本
all:
當所有內容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素,那麽被選擇的部分將是以該子元素向上回溯的最高祖先元素。
element:
可以選擇文本,但選擇範圍受元素邊界的約束

說明:

設置或檢索是否允許用戶選中文本。
  • IE6-9不支持該屬性,但支持使用標簽屬性 onselectstart="return false;" 來達到 user-select:none
    的效果;Safari和Chrome也支持該標簽屬性;
  • 直到Opera12.5仍然不支持該屬性,但和IE6-9一樣,也支持使用私有的標簽屬性 unselectable="on" 來達到 user-select:none 的效果;unselectable 的另一個值是 off;
  • 除Chrome和Safari外,在其它瀏覽器中,如果將文本設置為 -ms-user-select:none;,則用戶將無法在該文本塊中開始選擇文本。不過,如果用戶在頁面的其他區域開始選擇文本,則用戶仍然可以繼續選擇將文本設置為 -ms-user-select:none; 的區域文本;
  • 對應的腳本特性為userSelect

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 粉色 = 部分支持
ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support 6.0-9.0 4.0-40.0-moz- 4.0-8.0-webkit- 4.0-45.0-webkit- 6.0-8.0-webkit- 15.0-27.0-webkit- 6.0-8.3-webkit- 18.0-42.0-webkit-
10.0-11.0-ms-
element 6.0-9.0 4.0-40.0-moz- 4.0-8.0 4.0-45.0 6.0-8.0 15.0-27.0 6.0-8.3 18.0-42.0
10.0-11.0-ms-

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>user-select_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), [email protected], www.doyoe.com" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
.test{padding:10px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;background:#eee;}
</style>
</head>
<body>
<div class="test" onselectstart="return false;" unselectable="on">選擇我試試,你會發現怎麽也選擇不到我,哈哈哈哈</div>
</body>
</html>

3、

4、

5、

CSS.text不被選中