user-select
Whether the user can select the text of an element.
Syntax
user-select: none;Values
| Parameter | Type | Description |
|---|---|---|
| auto | keyword | As usual (the default). |
| none | keyword | The text cannot be selected. |
| all | keyword | One click selects the whole text of the element. |
Examples
Non-selectable text and a code selected with one click:
<p style="user-select: none;">This text cannot be selected.</p>
<p>Promo code: <code style="user-select: all;">SAVE25</code> — one click selects it all.</p>Notes
none suits buttons and drag handles, where accidental selection is annoying. Do not use it on ordinary text — people copy text, and blocking that only irritates them.
See also
- ::selection — The part of the text the user has selected.
- pointer-events — Whether the element reacts to mouse clicks and taps, or lets them pass to what is below.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.