We can apply CSS styles on scroll bars of the browser. Now Here we create a web page name is scrollbarpage.html to apply CSS styles on scroll bar.
<!doctype html>
<head>
<title>Working with CSS on Scroll Bars</title>
<style type="text/css">
html, body{
scrollbar-face-color:blue;
scrollbar-base-color:yellow;
scrollbar-arrow-color:black;
scrollbar-track-color:gray;
scrollbar-shadow-color:green;
scrollbar-hightlight-color:green;
scrollbar-3dlight-color:red;
scrollbar-darkshadow-color:red;
scrollbar-size:10px;
}
p{
width:600px;
}
</style>
</head>
<body bgcolor=#FFF0FT>
<h1>Applying CSS on scroll bars</h1>
<p>This is the simple paragraph for scrollbar Web page. This is the simple paragraph for scrollbar Web page. This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
</body>
</html>
We have Applied CSS styles on the scroll bars of the Web browser.
The output of the above Web page is:
<!doctype html>
<head>
<title>Working with CSS on Scroll Bars</title>
<style type="text/css">
html, body{
scrollbar-face-color:blue;
scrollbar-base-color:yellow;
scrollbar-arrow-color:black;
scrollbar-track-color:gray;
scrollbar-shadow-color:green;
scrollbar-hightlight-color:green;
scrollbar-3dlight-color:red;
scrollbar-darkshadow-color:red;
scrollbar-size:10px;
}
p{
width:600px;
}
</style>
</head>
<body bgcolor=#FFF0FT>
<h1>Applying CSS on scroll bars</h1>
<p>This is the simple paragraph for scrollbar Web page. This is the simple paragraph for scrollbar Web page. This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
<p>This is the simple paragraph for scrollbar Web page.</p>
</body>
</html>
We have Applied CSS styles on the scroll bars of the Web browser.
The output of the above Web page is:
No comments:
Post a Comment