ヘッダーやメニューで、ダブルクリックするとテキストが選択状態になるのを抑制したい。
簡単にできる方法はないかと調べると、CSSだけで選択を無効化できたのでメモ。
テキストの選択を無効にするCSS
user-select: none
で、指定した要素とその子孫要素のテキストを選択できなくなる。
JavaScriptで Selection
を用いた場合は、このCSSが設定されていても要素を選択できるため、コピー防止などにはならないが、テキスト選択の抑制としては十分。
Tailwind CSSのクラス
スタイリングにTailwind CSSを使っているが、そちらだと select-none
として用意されている。
振り返り
JavaScriptで何かやらないといけないかと思ったが、CSSだけで対応できてありがたい。
対応ブラウザを見ると、IEも10から対応していたので、かなり昔からあった模様。
しばらくCSSから遠ざかっていたので、ここら辺キャッチアップしないとなぁ...