?
This document uses PHP Chinese website manual Release
user-select:none |text| all | element
默認(rèn)值:text
適用于:除替換元素外的所有元素
繼承性:無(wú)
動(dòng)畫(huà)性:否
計(jì)算值:指定值
none:文本不能被選擇
text:可以選擇文本
all:當(dāng)所有內(nèi)容作為一個(gè)整體時(shí)可以被選擇。如果雙擊或者在上下文上點(diǎn)擊子元素,那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。
element:可以選擇文本,但選擇范圍受元素邊界的約束
IE6-9不支持該屬性,但支持使用標(biāo)簽屬性 onselectstart="return false;"
來(lái)達(dá)到 user-select:none
的效果;Safari和Chrome也支持該標(biāo)簽屬性;
直到Opera12.5仍然不支持該屬性,但和IE6-9一樣,也支持使用私有的標(biāo)簽屬性 unselectable="on"
來(lái)達(dá)到 user-select:none
的效果;unselectable 的另一個(gè)值是 off;
除Chrome和Safari外,在其它瀏覽器中,如果將文本設(shè)置為 -ms-user-select:none;
,則用戶(hù)將無(wú)法在該文本塊中開(kāi)始選擇文本。不過(guò),如果用戶(hù)在頁(yè)面的其他區(qū)域開(kāi)始選擇文本,則用戶(hù)仍然可以繼續(xù)選擇將文本設(shè)置為 -ms-user-select:none;
的區(qū)域文本;
對(duì)應(yīng)的腳本特性為userSelect。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android 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參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, 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">選擇我試試,你會(huì)發(fā)現(xiàn)怎么也選擇不到我,哈哈哈哈</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例