CSS設定頁面文字不能被選中 相容各種瀏覽器

2021-09-25 18:07:40 字數 2018 閱讀 7292

示例**:

你應該可以選中這段文字。

嗨,你不能選中這段文字!

css**:

.unselectable
user-select屬性控制著使用者除了在文字框裡,其他節點能否選中文字。它在chrome瀏覽器中對已載入的文字沒有影響。

/* keyword values */

user-select: none;

user-select: auto;

user-select: text;

user-select: contain;

user-select: all;

/* global values */

user-select: inherit;

user-select: initial;

user-select: unset;

/* mozilla-specific values */

-moz-user-select: none;

-moz-user-select: text;

-moz-user-select: all;

/* webkit-specific values */

-webkit-user-select: none;

-webkit-user-select: text;

-webkit-user-select: all; /* doesn't work in safari; use only

"none" or "text", or else it will

allow typing in the container */

/* microsoft-specific values */

-ms-user-select: none;

-ms-user-select: text;

-ms-user-select: element;

none元素及其子元素的文字不可選中。 請注意這個selection物件可以包含這些元素。 從firefox 21開始,none表現的像-moz-none,因此可以使用-moz-user-select: text在子元素上重新啟用選擇。

auto

auto的計算值確定如下:

text

使用者可以選擇文字。

-moz-none

元素和子元素的文字將顯示為無法選擇它們。 請注意,selection物件可以包含這些元素。 可以使用-moz-user-select: text. 在子元素上重新啟用選擇。 從firefox 21開始,none表現得像-moz-none.

all

在乙個html編輯器中,當雙擊子元素或者上下文時,那麼包含該子元素的最頂層元素也會被選中。

contain

element(ie-specific alias)

允許選擇在元素內開始; 但是,選擇將包含在該元素的邊界內。 僅在internet explorer中受支援。

參考 :

CSS設定文字不能被選中及解除限制

今天搜尋一些資料,碰到一些 不能複製文字,起初以為是js限制問題,使用解除右鍵的js之後還是不行,資料 js禁止選中文字方法 複製 if typeof element.onselectstart undefined else 複製 ie下有onselectstart這個方法,通過設定這個方法可以禁止...

CSS如何美化被選中的文字

css的作用就是用來美化網頁的內容或者結構層次。這我們都知道,不是嗎?隨著css技術的不斷革新公升級,我們獲得了更多的控制樣式的能力。乙個不是那麼眾所周知的技術就是我們可以在瀏覽器裡美化被選擇的文字的樣式。windows自身提供的是一種很難看的墨綠色的顏色,而蘋果電腦上提供的是淺綠色。火狐瀏覽器,i...

解決extjs grid文字不能選中的問題

x selectable,x selectable enable grid cell to be selected in chrome x selectable firefox x selectable ie unselectable ext.grid.gridview.prototype.cell...