css3のuser-selectの使い方を詳しく解説

css3のuser-selectの使い方を詳しく解説

user-select属性はcss3で新しく追加された属性で、ユーザーがテキストを選択できるかどうかを設定するために使用されます。置換要素を除くすべての要素で使用できます。 user-select の主な使用方法と注意事項について説明します。詳しくは、以下の css3 ドキュメントの説明を参照してください。

(1) 構文

user-select: text 要素

デフォルト値: text

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

(2)説明

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

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

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

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

(3) ブラウザサポート

次の図は、値が none|text|all の場合のブラウザを示しています。 support; 値が element の場合、ほとんどのブラウザはそれをサポートしていないため、リストには表示されません。

(4) 説明

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

Opera12.5

までサポートされていませんが、IE6-9 と同様にプライベート タグの使用もサポートしています。 user-select:none の効果を実現するための属性 unselectable= on" unselectable は 3 を除きます。 ;、他のブラウザの場合 ブラウザでテキストが -ms-user-select:none; に設定されている場合、ユーザーはそのテキスト ブロック内のテキストの選択を開始できません。ただし、ユーザーがページの別の領域でテキストの選択を開始した場合でも、テキストを

-user-select:none; に設定することで引き続きその領域のテキストを選択できます。スクリプト機能は

userSelect (5) 例 css コード:

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

html コード:

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

                                     

css3のuser-selectの使い方を詳しく解説

user-select属性はcss3で新しく追加された属性で、ユーザーがテキストを選択できるかどうかを設定するために使用されます。置換要素を除くすべての要素で使用できます。 user-select の主な使用方法と注意事項について説明します。詳しくは、以下の css3 ドキュメントの説明を参照してください。

参考リンク: http://www.php.cn/

(1) 構文

user-select:

text all |

text

範囲:

置換要素を除くすべての要素

(2) 値の説明

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

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

all:

すべてのコンテンツを1つとして扱う場合全体的に選択可能です。コンテキスト内の子要素をダブルクリックまたはクリックすると、選択した部分が子要素から遡った最上位の祖先要素になります。

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

(3) ブラウザサポート

次の図は、値が none|text|all の場合のブラウザを示しています。 support; 値が element の場合、ほとんどのブラウザはそれをサポートしていないため、リストには表示されません。

(4) 説明

1.

IE6-9

はこの属性をサポートしませんが、

user-select を実現するためのラベル属性

onselectstart="return false;"

の使用をサポートします。なし

Safari と

Chrome

もこのラベル属性をサポートします。

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

3 です (テキストが

-ms-user- に設定されている場合)。 select :none; を使用すると、ユーザーはそのテキスト ブロック内のテキストの選択を開始できなくなります。ただし、ユーザーがページの別の領域でテキストの選択を開始した場合でも、テキストを -user-select:none; に設定することで引き続きその領域のテキストを選択できます。スクリプト機能は userSelect です

(5) 例

css コード:

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

html コード:

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

css3 での user-select の使用法の詳細な説明については、PHP 中国語 Web サイトに注意してください。関連記事！