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

CSS では、user-select 属性を使用してテキスト要素に「user-select:none;」スタイルを追加するだけで、テキストの選択を禁止できます。 user-select 属性は、ユーザーがテキストを選択できるかどうかを設定または取得できます。値が "none" の場合、テキストは選択できないことを意味します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、user-select 属性を使用してテキストの選択を禁止できます。

ユーザー選択属性は、ユーザーがテキストを選択できるかどうかを設定または取得します。

構文:

user-select：none |text| all | element

属性値:

• 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;
}

補足: jsメソッド:

ontouchstart="return false;"

これをdomに追加します。コード スニペットでは、Android と IOS の 2 つのメソッドのサポートは個別にテストされていません。両方を同時に使用すると、Android と IOS が使用できなくなる可能性があります。

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

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