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の場合は一部選択ができない(対象要素全体が選択される)ようになります。