画面上の文字や画像を選択できないようにする

Tweet

Category css, JavaScript 2011/11/19

問題

文字や画像をダブルクリックされると、選択状態になってしまう。

文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。

ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？

答え

CSS3では以下のように書ける。

user-select: none;

ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。

以下のように、各実装にあわせた記述をしておく。

user-select: none; /* CSS3 */
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Safari、Chromeなど */
-ms-user-select: none; /* IE10かららしい */

さらにIEに対応するためには、以下のようにunselectable属性を指定する。

unselectable="on"

IEだといまひとつ期待したようにかっちり効いてくれないので、必要な場合は選択イベントが発生したときに選択を解除するJavascriptも追加する方法もあるが、あまり改善されない。

onSelectStart="return false;"

IEに関してはIE10に期待しておくことにする。

デモ

↓「user-select: none;」のみを指定したspan要素。

（サンプルテキスト）CSS3で指定した、選択させないようにしたテキスト。

↓さらに、各実装にあわせてスタイルシートに記述を追加

（サンプルテキスト）CSS3と各ブラウザ向けの指定をした、選択させないようにしたテキスト。

↓さらに、unselectable=”on”も追加

（サンプルテキスト）IE独自属性も追加して、選択させないようにしたテキスト。

↓さらに、onSelectStart=”return false;”も追加

（サンプルテキスト）IE対策のスクリプトも追加して、選択させないようにしたテキスト。