Rullefeltfarge - CSS-triks | CSS-almanakk 2025

Den scrollbar-colorEiendommen styrer de to fargene på en scrollbar: den tommelen farge og spor farge . scrollbar-colorer en del av CSS-arbeidsgruppens rullefeltmodul Nivå 1-utkast, som fremdeles pågår i skrivende stund.

Før scrollbar-colorhadde utviklere ingen standard måte å endre standardutseendet til nettleserens rullefelt uten å ty til å skjule rullefeltet via overflow: hiddenog gjengi JavaScript-baserte rullefelt eller bruke nettleser-prefixede rullefeltattributter. Med scrollbar-colorpå den annen side kan vi style en scrollbar å matche et design uten å ty til å gjøre om nettleseren funksjonalitet eller bruke leverandørens prefikser.

.scrollable-element ( scrollbar-color: red yellow; )

scrollbar-colorvil også godta verdier for darkog for lightå matche brukerens preferanser hvis de bruker noe som mørk modus på Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

Fra mars 2019 er ikke støtte for darkog lightverdier tilgjengelig i noen nettleser. støttes i Firefox. Se delen om nettleserstøtte nedenfor for mer informasjon.

Syntaks

scrollbar-color: auto | dark | light | ;

Verdier

scrollbar-color aksepterer følgende verdier:

auto er standardverdien og gjengir standard rullefeltfarger for brukeragenten.
dark vil fortelle brukeragenten å bruke mørkere rullefelt for å matche gjeldende fargevalg.
light vil fortelle brukeragenten å bruke lettere rullefelt for å matche gjeldende fargevalg.
angir to farger som skal brukes til rullefeltet. Den første fargen er på “tommelen” eller den bevegelige delen av rullefeltet som vises på toppen. Den andre fargen er for “sporet” eller den faste delen av rullefeltet.