scrollbar-color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die scrollbar-color CSS Eigenschaft legt die Farbe der Scrollbar-Leiste und des Schiebers fest.
Die Leiste bezieht sich auf den Hintergrund der Scrollbar, der im Allgemeinen unabhängig von der Scrollposition festgelegt ist.
Der Schieber bezieht sich auf den beweglichen Teil der Scrollbar, der normalerweise über der Leiste schwebt.
Wenn der scrollbar-color Wert auf das Wurzelelement des Dokuments gesetzt wird, werden die Werte auf die Viewport-Scrollbars angewendet.
Syntax
/* Keyword values */
scrollbar-color: auto;
/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */
/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
Werte
<scrollbar-color>-
Definiert die Farbe der Scrollbar.
autoStandard-Plattformdarstellung für den Leistenabschnitt der Scrollbar, in Ermangelung anderer verwandter Scrollbar-Farbeigenschaften. <color> <color>Wendet die erste Farbe auf den Schieber der Scrollbar an, die zweite auf die Scrollbar-Leiste.
Hinweis:
@media (forced-colors: active) setzt scrollbar-color auf auto.
Zugänglichkeit
Bei der Verwendung der scrollbar-color Eigenschaft mit bestimmten Farbwerten sollten Autoren sicherstellen, dass die angegebenen Farben genügend Kontrast zueinander haben. Bei Schlüsselwort-Werten sollten UAs sicherstellen, dass die von ihnen verwendeten Farben genügend Kontrast aufweisen. Siehe Techniken für WCAG 2.0: G183: Verwendung eines Kontrastverhältnisses von 3:1.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | scrollende Boxen |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
scrollbar-color =
auto |
<color>{2}
Beispiele
Färben von Überlauf-Scrollbars
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
HTML
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |
Browser-Kompatibilität
Loading…