mdnのuser-selectを見ていたら、user-selectを使えばCSSだけで1クリックで全選択肢できることに気がついたのでメモ。

user-select: all;

これを加えるだけで、1クリックで全選択ができるようになります。

pre {
    -webkit-user-select: all;
    user-select: all;
}

流石にコピーさせることまではできません。あと、これを加えると逆に部分的な選択がほぼ不可能になるのでどちらが良いかどうかは難しそう。

ブラウザ対応状況

{{}}

---

こういうなくても良いけど、あると便利な機能ほどCSSだけでつけられるといいですよね。必須な機能はどうしてもシェアを考えるとJSを使いたくなることも多いだろうし。