HTML Scrollbars
This page contains code for customizing scrollbars. You can use this code on scrollbars of the browser window, as well as scrollbars on HTML elements such as <textarea> and <div> elements with the overflow property set to allow scrollbars to appear when its content takes up more space than itself.
Webkit Browsers
The following code should work in WebKit browsers, such as Safari, Chrome, and Opera. Check out CSS scrollbars for an explanation of this code.
Click Preview to see each example's effect on the browser's scrollbars.
Internet Explorer
The following codes will only work on Internet Explorer as they use the proprietary extensions for Internet Explorer.
Scrollbar for Browser Window
Scrollbar Color for <textarea> Only
You can add color to the scrollbars of your form elements without it affecting the browser scrollbars. All you need to do is replace <body> with the name of the form element. For example, change <body> to <textarea>. Like this:
More Options
If you want more control over the scrollbar color, you can use a bunch of other properties. Here they are - their names are reasonably self explanatory. Try experimenting around with different colors to see the different effect it has on your scrollbars.
Browser Compatibility
The codes on this page use non-standard CSS. At the time of writing, the official CSS specification doesn't provide for customizing scrollbars. However, certain browser vendors provide proprietary extensions that allow for this. WebKit has the -webkit- range of extensions, and Microsoft has the -ms- extensions. The examples on this page use these vendor extensions.
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties