user-select的詳細用法

GeekGhc 發布于2019-08-02 15:12 / 1237人閱讀

摘要：只支持注意瀏覽器實現之間的區別之一是繼承。在中，不是由絕對定位的元素繼承的，但在和中，卻是由絕對定位的元素繼承而來的。

前言

做網頁的時候，有些文字我們需要能被選中，有些我們不要能被選中，那么這就需要用到一個css屬性了，那就是 user-select

使用方法

user-select: none|auto|text|contain|all;
 
/*firefox瀏覽器*/
-moz-user-select: none|text|all;
 
/*safari、chrome瀏覽器*/
-webkit-user-select: none|text|all; /*Safari中不支持該屬性值，只能使用none或者text，或者是在html的標簽屬性中使用*/
 
/*ie瀏覽器*/
-ms-user-select: none|text|element;
 
屬性值：
none :  元素和子元素的文本將無法被選中
text :  文本可以被選中
auto :  文本將根據瀏覽器的默認屬性進行選擇
all  :  當所有內容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素，那么被選擇的部分將是以該子元素向上回溯的最高祖先元素
contain、element :  可以選擇文本，但選擇范圍受元素邊界的約束，也就是選擇的文本將包含在該元素的范圍內。只支持Internet Explorer
 
注意： 
瀏覽器實現之間的區別之一是繼承。在Firefox中，-moz-user-select不是由絕對定位的元素繼承的，但在Safari和Chrome中，-webkit-user-select卻是由絕對定位的元素繼承而來的。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53965.html

user-select的詳細用法

摘要：只支持注意瀏覽器實現之間的區別之一是繼承。在中，不是由絕對定位的元素繼承的，但在和中，卻是由絕對定位的元素繼承而來的。前言做網頁的時候，有些文字我們需要能被選中，有些我們不要能被選中，那么這就需要用到一個css屬性了，那就是 user-select 使用方法 user-select: none|auto|text|contain|all; /*firefox瀏覽器*/ -moz...

seanlook 2019-08-30 11:02 評論0 收藏0
禁止用戶選擇的另一種思路（兼容 IE8）

摘要：禁止用戶選擇的另一種方法是在不想被選中的元素上面綁定事件并且返回。另一種思路偽類偽元素先上一個例子。標準當中方法可以用于所有的屬性和元素當中，但是目前還沒有任何一個瀏覽器實現了這個標準。 user-select 前端開發中常常會遇到一種需求，讓某些元素的內容不能被選中，一般的做法會用 user-select: none 來做，由于 user-select 并不是標準的 CSS 屬性，所...

Darkgel 2019-08-29 11:11 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
好看漂亮的html5網頁特效學習筆記(5)_弧形菜單

摘要：定義標準的文本。然后看看函數的定義自啟動來按下按鈕的時差不能超過最大持續時間重新繪制菜單項的位置先用確定按下按鈕的時間，儲存在中。如果到了規定時間的話，就執行。然后再把取下的第一個當成第十三個接在最后面，又成了新的菜單排列。 showImg(https://segmentfault.com/img/bVbw1zV?w=818&h=479); 效果：弧形菜單，文字按規則變形以及變換透...

Guakin_Huang 2019-08-30 15:44 評論0 收藏0