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

2019年11月4日2020年3月17日

私が地味に初めて知ったことです。
テキストベースのボタン実装でユーザーにテキストを選択させたくない場合があると思います。
この時に設定するスタイルの紹介です。

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

対象のCSSスタイルに user-select: none; を指定するのみです。簡単

以下がサンプルです。下の画像のみ user-select: none; を指定しています。

 

 

ちなみにブラウザによっては以下も追加する必要があります。基本的に追加しておけば良いでしょう。

-moz-user-select: none;
-webkit-user-select: none;