CSS の user-select が Android で手強かった

user-select: none した要素の中で一部の選択を許可したければ user-select: text を使うといい。というお話。

user-select という CSS プロパティがあって、これを none にするとコンテンツを選択することができなくなります。選択できないので、コピーもできません。

そんな user-select: none にしたコンテンツの中で、一部は選択できるようにしたい。といったときに、どうするか？

user-select の初期値にしてやればいいんだろ？と思い、MDN に初期値は auto と書いてあったので user-select: auto にしてみました。

iOS の Safari では、期待する動作をしたのですが、Android の Chrome ではとても微妙な動作でした。範囲選択はできる。コピーもできる。じゃぁ何が微妙なのか？

範囲選択すると「コピー」などのメニューが出ますね。これは他の場所をタップすれば消えるだろうというのが、ユーザー、少なくとも私の期待する動作です。しかし user-select: auto の場所でこのメニューを出すと、同じ user-select: auto の場所をタップしたときにメニューが消えません。これが微妙な動作。

じゃぁ何が正解？ということで、user-select の選択肢から考えられる3パターンを CodePen に書いて試してみました。

See the Pen CSS user-select by rch850 (@rch850) on CodePen.

その結果、期待する動作をしたのは user-select: text でした。よし、これを使おう。

auto が初期値だからといって、初期値に戻せばいいってわけじゃないことを学んだ user-select 体験でした。