Właściwość CSSInterakcja i inne
accent-color
Zmienia kolor akcentu kontrolek formularza: pól wyboru, przycisków opcji, suwaków i pasków postępu.
- Wartość domyślna
auto- Dziedziczona
- Tak
- Animowalna
- tak, jako kolor
- Dotyczy
- pola wyboru, przyciski opcji, suwaki i paski postępu
- JavaScript
element.style.accentColor = "#7c3aed"
Przykład
#CSS
:root {
accent-color: #a78bfa;
}HTML przykładu
<div style="accent-color: #a78bfa; display: grid; gap: 8px;">
<label><input type="checkbox" checked> Codzienne przypomnienie</label>
<label>Poziom trudności <input type="range" value="40"></label>
</div>Podgląd
Definicja i zastosowanie
#Właściwość accent-color pozwala jedną linijką pokolorować natywne kontrolki: zaznaczone pola wyboru, przyciski opcji, suwaki range i paski progress. Nie trzeba budować własnych kontrolek od zera.
Przeglądarka sama dobiera kolor znacznika (na przykład ptaszka w polu wyboru) tak, żeby był czytelny na wybranym akcencie.
Właściwość jest dziedziczona, więc ustawiona na :root koloruje wszystkie kontrolki w dokumencie.
Składnia
#Składnia
accent-color: auto | <kolor>;Wartości
#Wartości w praktyce
#auto
Kolor domyślny przeglądarki i systemu.
.demo { accent-color: auto; }#7c3aed
Fioletowe kontrolki.
.demo { accent-color: #7c3aed; }#10b981
Zielone kontrolki.
.demo { accent-color: #10b981; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zanim zbudujesz własne pole wyboru, sprawdź, czy
accent-colornie wystarczy. Natywne kontrolki są dostępne od razu. - Sprawdź kontrast akcentu z tłem, szczególnie w ciemnym motywie.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.