ひょんな事から、user-select
なるプロパティを知りました。
選択動作を制御するもので、選択できる範囲を制限したり、選択できなくさせるものだそうです。
ブラウザによって挙動が異なるので、ベンダープレフィックスが必要。
指定できる値は
- none
テキストを選択できなくする - auto
ブラウザのデフォルトに従う - text
ユーザが選択できるようにする。選択範囲の制限は無し。 - all
クリックで全選択状態にする - contain
- element
ユーザが選択できるようにする。選択範囲の制限あり。IEでのみ有効。
user-select - CSS: カスケーディングスタイルシート | MDN
user-selectで要素のテキスト選択を「させる」
遭遇した現象
SemanticUIのメニューとポップアップを併用した際、ポップアップで表示した部分が選択できない状況に遭遇しました。
例えばこんなメニュー&ポップアップ
See the Pen SemanticUI - menu and popup by s-mori (@s-mori) on CodePen.
「Ruby on Rails」をクリックでポップアップを表示するようにしています。
何もせずに表示させると、ポップアップ内のテキストを選択しようとしてもできません。
要素を無効にしながら調べると、どうやらデフォルトで.ui.menu .item
にuser-select: none;
がついているようでした。
ポップアップ内のテキストは選択可能にしたかったので、ポップアップに対して
user-select: text; -moz-user-select: text; // for firefox -webkit-user-select: text; // for safari -ms-user-select: text; // for Edge,IE
をつけて対応。各ブラウザで効くようにします。
余談
MDNによると
これは実験段階の機能です。 この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。 https://developer.mozilla.org/ja/docs/Web/CSS/user-select
とのこと。