PLAY CSS
jaen

Interaction

user-select

user-select sets whether the text in an element can be selected by dragging or double-clicking, and how it gets selected.

Syntax

auto | text | none | contain | all

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize

Code

.box {
  user-select: none;
}

Controls

user-selectnone
user-select
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Values

  • none: the text can't be selected, nor can the text of elements inside that don't set user-select themselves.
  • text: the text can be selected.
  • all: trying to select part of the element selects all of its content at once. Handy for text people should copy whole, such as code or coupon numbers.
  • auto (the initial value): none if the parent is none, all if the parent is all, contain (selection stays inside) in editable elements such as text fields, and text otherwise.

Drag across the sample text in the preview to try whether it can be selected.

The spec also has contain, which keeps a selection from extending outside the element it started in, but no browser supports it, so the controls on this page leave it out.

Safari needs -webkit-

Safari doesn't support user-select without a prefix, so write -webkit-user-select: none; as well. The preview on this page only writes user-select, so in Safari the sample text stays selectable.

It doesn't stop copying

Use none for text that gets in the way when selected by accident, such as button labels. The text can still be read through the developer tools, the page source, and screen readers, so it is no way to keep text from being copied.

References

MDN Web Docsuser-selectSpecificationCSS Basic User Interface Module Level 4Can I useuser-select

Comments

PLAY CSS