ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでコンテンツを選択不可にする方法

CSSでコンテンツを選択不可にする方法

藏色散人
藏色散人オリジナル
2021-04-02 14:33:562427ブラウズ

コンテンツを選択不可にする Css メソッド: 最初に新しい HTML ファイルを作成し、次に p タグを使用して複数行のテキストを作成し、クラス属性を p タグに追加します。最後にページ テキストを設定します。 「class(testpp)」 css スタイルを設定し、「user-select」属性を none に設定します。

CSSでコンテンツを選択不可にする方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

test.html という名前の新しい HTML ファイルを作成します。 , ページ上のコンテンツが選択されないよう css を使用する方法について説明します。

CSSでコンテンツを選択不可にする方法

test.html ファイルで、p タグを使用して、次のテスト用の複数行テキストを作成します。

CSSでコンテンツを選択不可にする方法

test.html ファイルで、p タグに class 属性を追加し、このクラスを通じて p タグの CSS スタイルを設定します。

CSSでコンテンツを選択不可にする方法

test.html ファイルに、 タグを記述します。 page このタグ内にCSSスタイルを記述します。

CSSでコンテンツを選択不可にする方法

css タグで、クラス (testpp) を介してページ テキストの CSS スタイルを設定し、user-select 属性を none に設定して、選択しない効果を実現します。ページのコンテンツ。

CSSでコンテンツを選択不可にする方法

ユーザー選択属性は、一部の下位バージョンのブラウザと互換性がない可能性があるため、互換性のあるスタイルを追加してコードの互換性を向上させることができます。コードは次のとおりです。

CSSでコンテンツを選択不可にする方法

test.html ファイルをブラウザで開き、効果を確認します。

CSSでコンテンツを選択不可にする方法

概要:

1. CSS スタイルで user-select 属性を none に設定し、コンテンツが選択できないようにします。

2. スタイルの互換性を向上させるために、「-webkit-user-select:none;-moz-user-select:none-ms-user-select:none;」を使用して、ページのコンテンツのスタイルを設定します。

推奨される学習: 「css ビデオ チュートリアル

以上がCSSでコンテンツを選択不可にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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