CSSで選択範囲を無効にする方法

CSS はフロントエンド開発の重要な部分であり、そのデザインによって Web サイトがより美しく、使いやすくなります。 CSS には多くの興味深い機能があります。その 1 つは、CSS 仕様により、ユーザーが特定の要素のテキストを選択できないようにすることができることです。

この機能はどのように実装されていますか? CSS では、「user-select」属性を使用して、ユーザーが要素のテキストを選択できるかどうかを定義できます。この属性には設定できる値が 3 つあります:

1. auto (デフォルト値): ユーザーは要素のテキストを選択できます。
2. none: ユーザーは要素のテキストを選択できません。
3. text: ユーザーは要素内のテキストのみを選択できます。

実装方法を見てみましょう:

ユーザーがページ全体のテキストを選択できないようにしたい場合は、次のような CSS を記述できます:

html {
  -webkit-user-select: none; /* webkit浏览器 */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* 标准语法 */
}

上記のコードでは、「user-select」属性は、ページ全体のテキストの選択を無効にするために使用されます。このコード行により、HTML ページ全体のすべての要素でテキスト選択が利用できなくなり、さまざまなブラウザーで機能します。

特定の要素のテキスト選択を禁止する必要がある場合は、次のような CSS を記述できます:

p.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

上記のコードでは、「no-select」クラスを使用して選択不可の段落を定義しています。 。特定の要素内のテキストの選択を禁止する必要がある場合、HTML タグにクラス名を追加するだけです:

<p class="no-select">这是一段不能被选择的文本。</p>

ユーザーによる特定の要素のテキストの選択を禁止するだけでなく、次のこともできます。また、「user -select」属性を使用して、ユーザーがその中のテキストのみを選択できるようにします。これにより、ユーザーは他の要素内のテキストを選択できなくなります。以下に例を示します。

div.selected {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

上記のコードでは、「selected」クラスを使用して、その中のテキストのみを選択できる div を定義します。この制限を実装する必要がある場合は、HTML タグにクラス名を追加できます。

要約すると、CSS の「user-select」属性を使用すると、選択を無効にしたり、選択を制限したり、選択内容を制御したりすることができます。これを使用して、ページの使いやすさと美しさを向上させることができます。この記事が皆さんのお役に立てば幸いです。

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