Munu
Scroll bar
การกำหนด 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 สีพื้นด้านล่าง
Example
<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>
Output
ดูผลที่ Scroll bar ด้านขวาของหน้าต่าง IE window หน้านี้ จะเป็นสีน้ำเงินอ่อน
ส่วนไหนเป็นตรงไหน มาดูกันชัดๆ อีกที ที่ตัวอย่างนี้
Example
<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>
Output
1. HTNL
2. CSS
3. XHTML
4. JavaScript
5. SQL
Output
scrollbar-face-color:#ff9999;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-3dlight-color:#ff6666;
scrollbar-darkshadow-color:#ff6666;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#ffcccc;
Output
scrollbar-face-color: #6586B1;
scrollbar-highlight-color: #E8EFF2;
scrollbar-shadow-color: #E8EFF2;
scrollbar-3dlight-color: #6586B1;
scrollbar-darkshadow-color: #6586B1;
scrollbar-track-color: #6586B1;
scrollbar-arrow-color: #E8EFF2;
Example
<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>
Output
