* :active ::after ::before :checked :default :dir() :disabled :empty :enabled :first-child ::first-letter ::first-line :first-of-type :focus :fullscreen :hover :in-range :indeterminate :invalid :lang() :last-child :last-of-type :link :not() :nth-child() :nth-last-child :nth-last-of-type() :nth-of-type :only-child :only-of-type :optional :out-of-range ::placeholder :read-only :read-write :required :root :scope ::selection :target :valid :visitedĪlign-content align-items all animation align-self animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size bleed block-overflow border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style If you want to dive a little deeper and even learn about more possibilities I’d recommend reading Dave’s post from 2009.CSS Introduction CSS Usage CSS Syntax CSS id and class CSS Text CSS Font CSS Links CSS Tables CSS Border CSS Padding CSS Margin CSS Color Names CSS Gradients All pseudo-elements use the prefix -webkit - these are the ones that exist:Īs you can see you do have more pseudo elements that can be styled which will give you more control over the design of the scrollbar.

WebKit and Blink based browsers (like Safari, Chrome, Vivaldi and Edge) support an older vendor specific way of designing scrollbars. These are deprecated and will not see the light as standard.

If you stumble across older articles on other websites mentioning properties like scrollbar-face-color, scrollbar-base-color, scrollbar-arrow-color, scrollbar-shadow-color, scrollbar-3dlight-color - better forget these. You can test this feature in Chrome (88+) today if you enable the experimental web platform features flag in Chrome’s configuration. In the future we will most likely also see scrollbar-gutter which allows authors to reserve space for the scrollbar so they can easier avoid unwanted changes in layout.

Webkit scrollbar css