94

I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?

/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
    width: 12px;
}

/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
    width: 12px;
}

In this fiddle, I would like to make the div's scrollbar customized, but the main window's scrollbar stay at the default.

http://jsfiddle.net/mrtsherman/4xMUB/1/

4 Answers 4

127

Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.

See demo at http://jsfiddle.net/4xMUB/2/

1
  • 4
    Be careful to not put white space between div and ::-webkit.. That took me a time to know why this does not work, the problem was the white space. Jan 20, 2018 at 5:26
43

I want to use a class selector for using a custom scrollbar.

Somehow .foo::-webkit doesn't work, but I figured out that div.foo::-webkit does work! Those ##$$*## pseudo-things....

See http://jsfiddle.net/QcqBM/16/

4
  • 5
    Cool, thanks for the tip. Probably another thing that would have wasted two hours of my time another day.
    – mrtsherman
    May 22, 2012 at 14:19
  • 3
    Not true anymore
    – Davi Lima
    Jul 18, 2017 at 13:26
  • This works! Tried multiple ways to get webkit rule work inside the container class but adding element tag in front somehow applies it correctly. Jun 4, 2020 at 14:03
  • I needed a space for this to work: div.foo ::-webkit-scrollbar
    – Chris
    Aug 4, 2022 at 8:15
20

You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.

#myDivId::-webkit-scrollbar {
    width: 12px;
}

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

#myDivId::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

http://jsfiddle.net/QcqBM/516/

1
  • Could you apply it on class name as well ?
    – URL87
    Jan 15, 2017 at 15:58
3

You can have a scss file and apply the style to a class there

style.scss

.myscrollbar {
  ::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
  }
  ::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: inset 7px 10px 12px #f0f0f0;
  }
}

home.html

<div class="myscrollbar">
put your contents here
</div>

I used the scrollbar generator here: https://w3generator.com/scrollbar

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.