CSSでテキスト選択をできないようにする

要素をドラッグ&ドロップで動かせるようにしたい場合など、一部のテキストを選択できないようにしたいことがたまにあるので、設定方法をメモ。

サンプルコード

user-selectプロパティを使用します。
対応ブラウザはこちらで、SafariとIEでベンダープレフィックスが必要になります。

<div class="user-select-none">
  <img src="img.jpg">
  <p>サンプルのテキストです。</p>
</div>

ユーザーが選択できないようにするには、user-select: none;を設定します。

.user-select-none {
	user-select: none;
}

これでテキストの選択ができないようになりました。
デモページ

上記デモ内で試していますが、allの場合は一部選択ができない(対象要素全体が選択される)ようになります。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年11月
 12345
6789101112
13141516171819
20212223242526
27282930