ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSを使用してテキスト選択のハイライトを無効にするにはどうすればよいですか?

CSSを使用してテキスト選択のハイライトを無効にするにはどうすればよいですか?

WBOY
リリース: 2023-09-19 11:21:09
転載
1031 人が閲覧しました

如何使用 CSS 禁用文本选择突出显示?

CSS では、select 属性を使用してテキスト選択の強調表示を無効にすることができます。ただし、テキストを無効にするには、テキストを選択したり強調表示したりできないように、CSS でいくつかのプロパティを適用する必要があります。強調表示されたテキストと強調表示されていないテキストの違いを理解するための例を見てみましょう。

  • チュートリアルポイント - テキストの強調表示。

  • チュートリアルポイント - テキストは強調表示されません。

使用される属性

この例では次のプロパティが使用されています -

  • user-select - この属性は、ユーザーがテキスト要素を選択するかどうかを定義します。 Chrome および Opera ブラウザはこのプロパティをサポートしています。

  • moz-user-select - この属性は user-select 属性と同じ効果があり、Mozilla Firefox ブラウザでサポートされています。

  • webkit-text-select - IOS safari ブラウザはこの属性をサポートしており、ユーザー選択属性と同じです。

  • webkit-user-select - このプロパティは、user-select プロパティと同じように機能します。 Safari ブラウザはこのプロパティをサポートしています。

例 1

この例では、まずテキストのメインタイトルを設定し、h1 要素と p 要素を使用してテキスト段落を設定します。段落上のテキスト選択のハイライトを無効にするには、内部 CSS を使用して p 要素のクラス (「.no-highlight」) を有効にします。このクラスは、user-select という名前のブラウザ プロパティの値を none に設定します (Chrome および Opera ブラウザではテキスト選択が無効になります)。

リーリー

例 2

この例では、p 要素を使用して 2 つの段落を作成し、テキスト選択の有効化と無効化の違いを示します。最初の段落はテキストの単純な表現であり、テキストが有効であることを意味しますが、2 番目の段落では ".no-highlight" というクラスを設定します。次に、内部 CSS を使用してこの参照を取得し、別のブラウザー プロパティのスタイルを設定することでテキスト選択を無効にします。

リーリー ###結論は###

テキストの強調表示を有効または無効にすることで、その概念を理解します。上記の出力では、カーソルがテキスト上に移動すると、最初のテキストが強調表示されますが、2 番目の段落では、内部 CSS で使用されているブラウザーを無効にするプロパティによりテキストが強調表示されないことがわかります。

以上がCSSを使用してテキスト選択のハイライトを無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート