ホームページ  >  記事  >  ウェブフロントエンド  >  テキストが選択されないようCSSを設定する方法

テキストが選択されないようCSSを設定する方法

王林
王林オリジナル
2020-11-16 13:42:562212ブラウズ

CSS で選択できないテキストを設定する方法: [user-select:none] など、user-select 属性を使用して設定できます。 user-select 属性は CSS3 の新機能で、コンテンツの選択性を制御するために使用されます。

テキストが選択されないようCSSを設定する方法

属性の紹介:

user-select は、css3 UI 仕様の新しい関数であり、コンテンツの選択性を制御するために使用されます。

(学習ビデオ共有: css ビデオ チュートリアル)

コード実装:

/*设置文字不能被选中     以下为css样式*/
-webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;

属性値:

  • auto - デフォルト値、ユーザーは要素のコンテンツを選択できます

  • none - ユーザーは要素

  • # のコンテンツを選択できません## text - ユーザーは要素内のテキストを選択できます

  • element - テキストはオプションですが、要素の境界内に限ります (IE と FF でのみサポートされます) all -エディター内で、子要素上でダブルクリック/コンテキスト クリックが発生すると、その要素の最上位の祖先要素が選択されます。

  • -moz-none——Firefox プライベートでは、入力入力ボックス内のテキストを除き、要素とサブ要素のテキストは選択できません (IE ブラウザーでは、onselectstart= を使用します)。この関数を実装するための「javascript: return false;」イベント)

関連する推奨事項:

CSS チュートリアル

以上がテキストが選択されないようCSSを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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