CSSだけで任意のテキストを1クリックで全選択

Ads

Result

1クリックで全選択できるようにする的なやつです。オートコピーまでは出来ません

分かる人ならコードを見るまでも無くタイトルでピンと来てると思いますがuser-selectを使います

css

code {
  -webkit-user-select: all;
  user-select: all;
  display: block;
  font-size:16px;
  padding: 20px;
  border: 1px dashed #999;
  color: #31808c;
  background-color: #fff;
  text-align: left;
  overflow: auto;
}

user-selectはテキストをコピペできないようにするuser-select: none;の情報が多いみたいですがallにするとこんな風に任意のテキストの全選択をサポートできるようになります

can i use

user-selectはnoneやautoは多くのブラウザにサポートされています

ですが、allはまだ微妙な感じなので実用にはまだ早そうです

via

Select All