ホームページ  >  記事  >  ウェブフロントエンド  >  ユーザーセレクトの使い方は?デフォルト値は何ですか?

ユーザーセレクトの使い方は?デフォルト値は何ですか?

清浅
清浅オリジナル
2019-05-14 17:04:279592ブラウズ

user-select は、ユーザーがテキストを選択できるかどうかを設定するために使用されます。デフォルト値は text であり、テキストが選択できることを意味します。他に 3 つの属性値があります。何も選択できない、全体としてすべてのコンテンツを選択できる、要素は選択できるが要素の境界によって制限される

ユーザーセレクトの使い方は?デフォルト値は何ですか?

user-selectこの属性は CSS3 の新しい属性であり、ユーザーがテキストを選択できるかどうかを設定するために使用されます。

構文

user-select:none | text | all | element

デフォルト値: text

適用範囲:置換要素を除くすべての要素

Take Valueの説明

none: テキストを選択できません

text: テキストを選択できます

all: すべてのコンテンツを全体として選択できます。子要素をダブルクリックするか、コンテキストに応じてクリックすると、選択した部分がその子要素から遡った最上位の祖先要素になります。

要素: テキストは選択できますが、選択範囲は要素の境界によって制限されます

説明

1. IE6-9 はサポートしていませんこの属性は、u​​ser-select:none の効果を実現するためのタグ属性 onselectstart=”return false;” の使用をサポートします。Safari と Chrome もこのタグ属性をサポートします。

2. この属性はまだサポートされていません。 Opera12.5 まではサポートされていましたが、IE6-9 と同様に、user-select:none の効果を達成するためのプライベート ラベル属性 unselectable="on" の使用もサポートされています。unselectable の他の値は off です。

3. Chrome や *Safari に加えて、他のブラウザでは、テキストが -ms-user-select:none; に設定されている場合、ユーザーはそのテキスト ブロック内のテキストの選択を開始できません。ただし、ユーザーがページの他の領域でテキストの選択を開始した場合でも、テキストを -ms-user-select:none; *;

4 に設定することで、その領域のテキストの選択を続けることができます。対応するスクリプト機能は userSelect

例:

css コード:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html コード:

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</div>
です。

以上がユーザーセレクトの使い方は?デフォルト値は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。