Customize a Scroll Box

Question

I am trying to create a scroll box whereby I can alter the shape and colors of the arrows and also the background of the text area.

I am trying to create the same scroll box as the followings but to no avail.

Answer 1

You can style Chrome, Opera and IE's scrollbars. Unfortunately, Firefox doesn't support it.

Moreover, each browser engine uses its own prefixes and properties to style the scrollbars, some offer more than others.

WebKit example:

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

::-webkit-scrollbar-track {
  background: grey;
}

::-webkit-scrollbar-thumb {
  background: black;
}

There are plenty of resources online about styling the scrollbars.

Bottom line is:
if you want 100% browser compatibility, use a JavaScript solution (google for "jquery scrollbars").

Answer 2

Every browser handles scrollbars with their own styling so changing them and making them look universally the same across browsers is very difficult. I know this is accomplishable with javascript but I'm not able to point you in the right direction of where to start with that.

Answer 3

Great question!

As the other answers state the main scrollbars are styled and handled by the browser so this is not something you would achieve universally in all browsers.

---

However having said that there is a great resource here to help with this, its not going to produce exactly what you asked for but it will give you some cool scrollbars.