CSSでテキスト選択を無効にする方法

CSS でテキストの選択を禁止するには、user-select 属性を追加し、その属性値を none (テキストを選択できないことを意味します) に設定します。具体的なコードは [user-select:なし;]。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

Web ブラウザでテキストをダブルクリックすると、テキストが選択されるか強調表示されます。では、この行為を禁止したい場合はどうすればよいでしょうか?実際には非常に簡単で、次のプロパティを使用するだけです。

user-select 属性は、要素のテキストを選択できるかどうかを指定します。

Web ブラウザでテキストをダブルクリックすると、テキストが選択されるか強調表示されます。このプロパティは、この動作を防止するために使用されます。

構文:

user-select: auto|none|text|all;

属性値:

• auto デフォルト。ブラウザで許可されている場合はテキストを選択できます。

• #none テキストの選択を禁止します。

• #text テキストはユーザーが選択できます。

• #all ダブルクリックする代わりにクリックしてテキストを選択します。

実装コードは以下の通りです。

PC側:

.not-select{
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
}

モバイル側:

.no-touch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

関連動画共有:

CSS ビデオ チュートリアル

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