CSSのuser-select【現役エンジニアが解説】
今回は、CSSのuser-selectについて、3種類の使い方に分け、簡単に解説していきます。
全選択
user-selectプロパティの値をallにすると全選択可能になります。
文字列を1度クリックすることで、文章全体が選択されるようになります。
.hoge{
user-select:all;
}
上記のコードでは、hogeのクラスの要素の文字列をクリックすると全選択されるようにしています。
選択不可
user-selectプロパティの値をnoneにすることで選択不可となります。
文字列を範囲選択することができなくなるため、コピー等ができなくなります。
.hoge{
user-select:none;
}
上記のコードでは、hogeというクラスの要素の文字列を範囲選択することができないようにしています。
部分選択可能
user-selectプロパティの値をtextにした場合、通常どおり、選択できます。
値がallの場合とは異なり、個々の文字列の選択と文章全体の選択の両方が可能です。
.hoge{
user-select:text;
}
上記のコードでは、hogeというクラスを持つ要素の文字列を部分選択と全選択の両方をできるようにしています。