2020-01-07 更新

ボタンなどに設定した文字や画像を選択できないようにする

スマートフォンやタブレットに合わせたサイトデザインにすると、時々、ボタンに設定した文字列や画像をデザイン上選択状態にしたくない場合があります。

タッチ操作が可能なデバイスの場合(主にスマートフォンやタブレット)、ボタンを押したつもりでも実際には押せていないといったことがままあり、選択状態だけが残ってしまうといった気持ちの悪い状態になってしまうことがあるので、対応は必須だと思います。

目次

  • コード
  • 動作確認
  • 参考リンク

コード


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

動作確認

「user-select:none;」の設定なし

「user-select:none;」の設定あり

参考リンク

CSS】関連記事