CSS.text不被选中
生活随笔
收集整理的這篇文章主要介紹了
CSS.text不被选中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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。
兼容性:
- 淺綠?= 支持
- 紅色?= 不支持
- 粉色?= 部分支持
| 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參考手冊_web前端開發參考手冊系列</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">選擇我試試,你會發現怎么也選擇不到我,哈哈哈哈</div> </body> </html>
?
3、
4、
5、
?
轉載于:https://www.cnblogs.com/h5skill/p/8446704.html
總結
以上是生活随笔為你收集整理的CSS.text不被选中的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java之Array(数组)说明
- 下一篇: 求一个好听女孩子的名字!