1. 程式人生 > >使用CSS裡的user-select屬性控制使用者在頁面上選中的內容

使用CSS裡的user-select屬性控制使用者在頁面上選中的內容

CSS裡的user-select屬性用來禁止使用者用滑鼠在頁面上選中文字、圖片等,也就是,讓頁面內容不可選。也可以只允許使用者選中文字,或者全部都放開,使用者可以同時選中文字、還包括文本里的圖片、視訊等其它東西。user-select屬性的作用是元素級別的,它不僅可以作用整個頁面,也可以只在指定的元素和其子元素上生效。

寫這篇文章的時候,“user-select”屬性在各大瀏覽器裡都還是實驗性的屬性,以後有可能廢棄,也有可能轉正,目前使用各種瀏覽器引擎字首,它的作用還是能發揮的不錯的。

我們來先看看user-select屬性的語法:

  1. user-select: none;
  2. user-select: auto;
  3. user-select: text;
  4. user-select: contain;
  5. user-select: all;
  6. //火狐瀏覽器
  7. -moz-user-select: none;
  8. -moz-user-select: text;
  9. -moz-user-select: all;
  10. //谷歌瀏覽器
  11. -webkit-user-select: none;
  12. -webkit-user-select: text;
  13. -webkit-user-select: all;
  14. //IE
  15. -ms-user-select: none;
  16. -ms-user-select: text;
  17. -ms-user-select: all;
  18. -ms-user-select: element;

下面是“user-select”屬性的屬性值介紹:

none
禁止使用者選中
text
對使用者的選擇沒有限制
all
目標元素將整體被選中,也就是說不能只選中一部分,在你用滑鼠選中部分文字時,瀏覽器會自動選中整個元素裡的內容。(谷歌瀏覽器裡好像不太靈?)