ポンコツ.log

ひよっこエンジニアのちょっとしたメモ。主に備忘録。たまに雑記。

【CSS】user-selectでテキスト選択を制御

ひょんな事から、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 .itemuser-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

とのこと。