การกำหนด style ใ้ห้กับ Scroll bar ใช้งานได้เฉพาะ IE5.5+ ไม่สามารถใช้ได้กับ Firefox
| Property | Value | |
|---|---|---|
| scrollbar-face-color | color | สีแถบที่เลื่อน |
| scrollbar-highlight-color | color | สีขอบด้านบน และด้านซ้าย ด้านใน |
| scrollbar-shadow-color | color | สีขอบด้านล่าง และด้านขวา ด้านใน |
| scrollbar-3dlight-color | color | สีขอบด้านบน และด้านซ้าย ด้านนอก |
| scrollbar-darkshadow-color | color | สีขอบด้านล่าง และด้านขวา ด้านนอก |
| scrollbar-arrow-color | color | สีลูกศร |
| scrollbar-track-color | color | สีพื้นด้านล่าง |
ตัวอย่าง
<html>
<head>
<style type="text/css">
html {
/*ที่เลื่อน*/
scrollbar-face-color: #DAE8F7;
/*สีขอบด้านบน และด้านซ้าย ด้านใน*/
scrollbar-highlight-color: #ffffff;
/*สีขอบด้านล่าง และด้านขวา ด้านใน*/
scrollbar-shadow-color: #ffffff;
/*สีขอบด้านบน และด้านซ้าย ด้านนอก*/
scrollbar-3dlight-color: #5F9FE0;
/*สีขอบด้านล่าง และด้านขวา ด้านนอก*/
scrollbar-darkshadow-color: #5F9FE0;
/*ลูกศร*/
scrollbar-arrow-color: #5F9FE0;
/*พื้นด้านล่าง*/
scrollbar-track-color: #ffffff;
}
</style>
<head>
<body>
1. HTNL<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL
</body>
<html>
ผลลัพธ์<head>
<style type="text/css">
html {
/*ที่เลื่อน*/
scrollbar-face-color: #DAE8F7;
/*สีขอบด้านบน และด้านซ้าย ด้านใน*/
scrollbar-highlight-color: #ffffff;
/*สีขอบด้านล่าง และด้านขวา ด้านใน*/
scrollbar-shadow-color: #ffffff;
/*สีขอบด้านบน และด้านซ้าย ด้านนอก*/
scrollbar-3dlight-color: #5F9FE0;
/*สีขอบด้านล่าง และด้านขวา ด้านนอก*/
scrollbar-darkshadow-color: #5F9FE0;
/*ลูกศร*/
scrollbar-arrow-color: #5F9FE0;
/*พื้นด้านล่าง*/
scrollbar-track-color: #ffffff;
}
</style>
<head>
<body>
1. HTNL<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL
</body>
<html>
ดูผลที่ Scroll bar ด้านขวาของหน้าต่าง IE window หน้านี้ จะเป็นสีน้ำเงินอ่อน
ส่วนไหนเป็นตรงไหน มาดูกันชัดๆ อีกที ที่ตัวอย่างนี้
ตัวอย่าง
<html>
<head>
<style type="text/css">
.divbar { width:200px; height:100px; overflow:scroll;
/*ที่เลื่อน*/
scrollbar-face-color:green;
/*สีขอบด้านบน และด้านซ้าย ด้านใน*/
scrollbar-highlight-color:white;
/*สีขอบด้านล่าง และด้านขวา ด้านใน*/
scrollbar-shadow-color:white;
/*สีขอบด้านบน และด้านซ้าย ด้านนอก*/
scrollbar-3dlight-color:red;
/*สีขอบด้านล่าง และด้านขวา ด้านนอก*/
scrollbar-darkshadow-color:black;
/*ลูกศร*/
scrollbar-arrow-color:yellow;
/*พื้นด้านล่าง*/
scrollbar-track-color:gray;
}
</style>
<head>
<body>
<div class="divbar">
1. HTNL<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL<br /><br /><br />
</div>
</body>
<html>
ผลลัพธ์<head>
<style type="text/css">
.divbar { width:200px; height:100px; overflow:scroll;
/*ที่เลื่อน*/
scrollbar-face-color:green;
/*สีขอบด้านบน และด้านซ้าย ด้านใน*/
scrollbar-highlight-color:white;
/*สีขอบด้านล่าง และด้านขวา ด้านใน*/
scrollbar-shadow-color:white;
/*สีขอบด้านบน และด้านซ้าย ด้านนอก*/
scrollbar-3dlight-color:red;
/*สีขอบด้านล่าง และด้านขวา ด้านนอก*/
scrollbar-darkshadow-color:black;
/*ลูกศร*/
scrollbar-arrow-color:yellow;
/*พื้นด้านล่าง*/
scrollbar-track-color:gray;
}
</style>
<head>
<body>
<div class="divbar">
1. HTNL<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL<br /><br /><br />
</div>
</body>
<html>
ตัวอย่าง
<html>
<head>
<style type="text/css">
.bar3 { width:200px; height:100px; background-color:#FCF1D8;
scrollbar-face-color: #FBB917;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #F88017;
scrollbar-3dlight-color: #FDD017;
scrollbar-darkshadow-color: #F87217;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FDD017;
}
</style>
<head>
<body>
<textarea class="bar3">
1. HTNL
2. CSS
3. XHTML
4. JavaScript
5. SQL
1. HTNL
2. CSS
3. XHTML
4. JavaScript
5. SQL
</textarea>
</body>
<html>
ผลลัพธ์<head>
<style type="text/css">
.bar3 { width:200px; height:100px; background-color:#FCF1D8;
scrollbar-face-color: #FBB917;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #F88017;
scrollbar-3dlight-color: #FDD017;
scrollbar-darkshadow-color: #F87217;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FDD017;
}
</style>
<head>
<body>
<textarea class="bar3">
1. HTNL
2. CSS
3. XHTML
4. JavaScript
5. SQL
1. HTNL
2. CSS
3. XHTML
4. JavaScript
5. SQL
</textarea>
</body>
<html>
