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.