:: - webkit-scrollbar-button with content

Question

I tried to create a webkit scrollbar like Visual Studio.

Example:

Original Visual Studio Scrollbar

My question is how can I set ::-webkit-scrollbar-button

as an example?

Here is my code:

::-webkit-scrollbar-button {
    height: 10px;
    content: "▲";
    color: rgb(255, 255, 255);
    background: rgb(255, 0, 0);
}

Output: My scrollbar

Can a property be used content: "";

to set a UTF character such as ▲ or ▼? Why won't it appear?

Here is the Fiddle

+3

css3 webkit scrollbar

Adrian preuss May 13 '17 at 8:08

source to share

1 answer

Alexander Paul · Answer 1 · 2017-05-13T10:25:31+0000

content: ""

doesn't seem to work with the scrollbar. I also tried with help content: "\25B2"

but still doesn't work.

Maybe you can use a background image like in this Fiddle