CSS - user-select

概要

属性名 user-select
値 auto | text | none | contain | all
初期値auto
適用可能要素テキスト
継承継承しない。
サポートhttps://caniuse.com/?search=user-select

説明

値説明
autoデフォルトの動作となります。
textテキストを範囲選択することができます。
none選択できなくなります。
contain要素の内部を範囲選択することができます。要素の外部まで選択することはできません。まだあまり実装されていません。
all要素の一部をクリックすると要素全体が選択されます。

使用例

CSS
.us-auto { user-select: auto; }
.us-text { user-select: text; }
.us-none { user-select: none; }
.us-contain { user-select: contain; }
.us-all { user-select: all; }
HTML
<div class="sample">
  <div class="us-auto">デフォルトの動作となります(auto)。</div>
  <div class="us-text">テキストを範囲選択できます(text)。</div>
  <div class="us-none">テキストを範囲選択できません(none)。</div>
  <div class="us-contain">要素内部のみ範囲選択することができます(contain)。</div>
  <div class="us-all">クリックすると全体が選択されます(all)。</div>
</div>
表示
デフォルトの動作となります(auto)。
テキストを範囲選択できます(text)。
テキストを範囲選択できません(none)。
要素内部のみ範囲選択することができます(contain)。
クリックすると全体が選択されます(all)。

リンク

Copyright (C) 2022 杜甫々
初版：2022年9月25日、最終更新：2022年9月25日
https://www.tohoho-web.com/css/prop/user-select.htm