These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar). I came across this cool little snippet a while back and wanted to share.

Below i put together two different sets of code, with rounded corners and without. Simply add the code below to the bottom of your index.css file and replace the colors to your needs.

It seems to only work with Safari and Chrome

demo

Without border-radius

Code Select Expand

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}

::-webkit-scrollbar-thumb {
  background-color: #72c1ae;
}

With border-radius

Code Select Expand

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
  -webkit-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #72c1ae;
  -webkit-border-radius: 10px;
}

Works in opera 15 (blink) as well. And in stock android browser (JB) for things like shoutbox etc that bring up scrollbars.

Works in opera 15 (blink) as well. And in stock android browser (JB) for things like shoutbox etc that bring up scrollbars.

I tested it with Opera but it may be outdated. Thanx for the feedback.

theres a new beta out of opera. Opera 15 under the next stream. Its basically chrome. Using blink engine.

presto is no more :(

Theres a minor revolution, theyve stripped out everything including bookmarks and integrated mail :(