`accent-color` în CSS

Design Responsiv și Interfață CSS Modern (2022+)

Personalizează instantaneu culoarea controalelor native de formular (checkbox, radio, range, progress) dintr-o singură linie.

Sintaxă CSS

accent-color: #2563eb;
accent-color: #e34f26;
accent-color: auto;

Ce face `accent-color`

În trecut, pentru a face o căsuță de bifare (checkbox) de altă culoare decât albastrul implicit al browserului, trebuia să ascunzi inputul și să construiești un întreg mecanism complicat din ::before și SVG-uri.

Cu accent-color, o singură linie de cod pe :root sau pe formular colorează automat toate casetele de bifare, butoanele radio, glisoarele de volum (<input type="range">) și barele de progres în nuanța brandului tău, browserul calculând automat și un contrast optim.

Valori uzuale

Valoare	Descriere
`culoare`	Nuanța aplicată controalelor native (hex, rgb, etc.).
`auto`	Valoarea implicită a browserului.

Exemple

Exemplul 1: Personalizarea controalelor de formular la culoarea brandului

Transformă instant aspectul formularelor pe tot site-ul.

:root {
  accent-color: #e34f26; /* portocaliu dexblog */
}

Efect vizual în browser

Toate căsuțele de bifare și butoanele rotunde radio bifate devin automat portocalii elegante în loc de albastru de sistem.

Greșeli frecvente

Folosirea unei nuanțe prea deschise (ex. galben pal) unde semnul de bifat alb din căsuță nu se mai distinge.

Comenzi înrudite

color: Setează culoarea textului și a elementelor decorative asociate (sublinieri, borduri implicite).
Variabile CSS (Custom Properties: var(--nume)): Stochează valori refolosibile (culori, spațieri, fonturi) care pot fi actualizate într-un singur loc pe tot site-ul.

Ce face accent-color