Recipe 2.2 Coloring the Scrollbar
Problem
You want to adjust the color of the scrollbar on a
browser's viewport, or the window on the browser.
Solution
Use the properties that manipulate scrollbar colors in browsers that
support it:
body,html {
scrollbar-face-color: #99ccff;
scrollbar-shadow-color: #ccccff;
scrollbar-highlight-color: #ccccff;
scrollbar-3dlight-color: #99ccff;
scrollbar-darkshadow-color: #ccccff;
scrollbar-track-color: #ccccff;
scrollbar-arrow-color: #000033;
}
|
Because these properties aren't part of the W3C
recommendations for CSS, browser vendors don't have
to put in support for these properties. This Solution works only on
the KDE Konqueror browser and on Internet Explorer 5.5+ for Windows.
Other browsers will skip over the rules as though they
weren't there. These rules won't be
validated by services such as http://jigsaw.w3.org/css-validator/validator-uri.html.
|
|
Discussion
Although you might think of a scrollbar as a simple tool,
it's actually composed of several widgets that
create a controllable 3D object. Figure 2-4
spotlights the different properties of a scrollbar. As you can see,
to create a truly different color scheme for the scrollbar, you must
alter the value of seven properties.
In addition to adjusting the scrollbar of the browser viewport, you
also can adjust the colors of the scrollbar in the
textarea for a web form,
framesets, iframes, and
generally anything with a scrollbar:
.highlight {
scrollbar-face-color: #99ccff;
scrollbar-shadow-color: #ccccff;
scrollbar-highlight-color: #ccccff;
scrollbar-3dlight-color: #99ccff;
scrollbar-darkshadow-color: #ccccff;
scrollbar-track-color: #ccccff;
scrollbar-arrow-color: #000033;
}
<form>
<textarea class="highlight"></textarea>
</form>
When rendering a page that doesn't contain a valid
DOCTYPE, Internet
Explorer for Windows experiences what is known as quirks
(nonstandard behavior) mode and looks
for the scrollbar properties in the body selector.
When the page contains a valid DOCTYPE, Internet Explorer for Windows
is in Standards mode and it obeys the html
selector. So, just in case the web document's
DOCTYPE might change, it's best to ensure that the
body and html selectors are
grouped and applied in one CSS rule:
html .highlight, body .highlight {
scrollbar-face-color: #99ccff;
scrollbar-shadow-color: #ccccff;
scrollbar-highlight-color: #ccccff;
scrollbar-3dlight-color: #99ccff;
scrollbar-darkshadow-color: #ccccff;
scrollbar-track-color: #ccccff;
scrollbar-arrow-color: #000033;
}
See Also
The MSDN Scrollbar Color Workshop at
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm
to pick colors for a custom scrollbar; Recipe 3.3 for changing the cursor, another user
interface widget of the browser.
| 
No comments:
Post a Comment