user-select în CSS

Controlează dacă utilizatorul poate selecta textul dintr-un element prin tragere cu cursorul mouse-ului.

Sintaxă CSS
user-select: none; /* textul nu poate fi selectat accidental cu mouse-ul */
user-select: text; /* selectare normală */
user-select: all;  /* la un singur clic se selectează tot textul */

Ce face user-select

Proprietatea user-select îmbunătățește ergonomia aplicațiilor web:

• none: ideal pentru butoane, etichete de interfață sau iconițe; previne evidențierea albastră inestetică atunci când utilizatorul dă dublu-clic rapid pe un buton.
• all: excelent pentru coduri promoționale, chei API sau numere de cont: la un singur clic utilizatorul selectează automat tot textul pentru a-l copia cu ușurință.

Valori uzuale

Valoare Descriere
none Previne selecția textului cu cursorul.
all Selectează tot conținutul la un singur clic.
auto / text Comportament standard de selecție.

Exemple

Exemplul 1: Buton fără selecție accidentală și căsuță de cod ușor de copiat

user-select: all face copierea textului o plăcere.

button {
  user-select: none;
}
.cod-cupon {
  user-select: all;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 4px;
}

Efect vizual în browser

Textul din buton nu se albăstrește la clicuri rapide repetate, iar un clic pe cupon selectează instant întreg textul.

Greșeli frecvente

  • Aplicarea lui user-select: none pe paragrafe întregi de articol în încercarea naivă de a preveni furtul de text (utilizatorii pot citi textul din View Source sau Inspector, iar această restricție enervează cititorii legitimi care vor să citeze un paragraf).

Comenzi înrudite

  • cursor: Stabilește forma cursorului mouse-ului când acesta plutește deasupra unui element, oferind indicii clare de utilizare.