`appearance` în CSS

Design Responsiv și Interfață CSS UI 4 (fără prefix: Chrome 84, Firefox 80, Safari 15.4)

Elimină sau păstrează aspectul nativ al controalelor de formular (select, checkbox, radio), ca să le poți stiliza complet.

Sintaxă CSS

appearance: none;   /* elimină stilul nativ al sistemului */
appearance: auto;   /* stilul nativ (implicit pe controale) */
appearance: textfield;
appearance: menulist-button;

Ce face `appearance`

Controalele de formular (<select>, checkbox-uri, butoane radio, câmpuri de căutare) sunt desenate implicit cu stilul sistemului de operare, iar multe proprietăți CSS nu au efect asupra lor. appearance: none elimină acest stil nativ și transformă controlul într-o cutie pe care o poți stiliza ca pe orice element.

Controlul își păstrează comportamentul: un checkbox cu appearance: none rămâne bifabil, focusabil și accesibil, iar :checked funcționează. Doar desenul lui (bifa, săgeata) dispare, deci trebuie să-l refaci tu.

Varianta fără prefix este suportată de toate browserele actuale; prefixul -webkit-appearance mai apare în coduri vechi și nu mai este necesar.

Valori uzuale

Valoare	Descriere
`none`	Fără stil nativ; controlul poate fi stilizat complet.
`auto`	Stilul nativ al sistemului (implicit pe controale).
`menulist-button`	Pe <select>: aspect de buton cu săgeată.
`textfield`	Pe câmpuri: aspect de câmp de text simplu (ex. fără săgețile de la type=number în Firefox).

Exemple

Exemplul 1: Select cu săgeată proprie

Săgeata nativă dispare și o înlocuim cu o imagine SVG de fundal.

.select-oras {
  appearance: none;
  padding: 10px 40px 10px 12px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  background: #ffffff url("sageata-jos.svg") no-repeat right 12px center / 16px;
  font: inherit;
}

Efect vizual în browser

Lista „Alege orașul” (Iași, Cluj, București) arată la fel în Chrome, Firefox și Safari: colțuri rotunjite, chenar gri și o săgeată proprie în dreapta.

Exemplul 2: Checkbox personalizat

Cutia nativă dispare; desenăm un pătrat care devine verde la bifare.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #64748b;
  border-radius: 4px;
  display: grid;
  place-content: center;
}
input[type="checkbox"]:checked {
  background: #16a34a;
  border-color: #16a34a;
}
input[type="checkbox"]:checked::before {
  content: "✓";
  color: #ffffff;
  font-size: 14px;
}