รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

Scroll bar


สอน CSS
> Scroll bar



การกำหนด style ใ้ห้กับ Scroll bar ใช้งานได้เฉพาะ IE5.5+ ไม่สามารถใช้ได้กับ Firefox

PropertyValue 
scrollbar-face-colorcolorสีแถบที่เลื่อน
scrollbar-highlight-colorcolorสีขอบด้านบน และด้านซ้าย ด้านใน
scrollbar-shadow-colorcolorสีขอบด้านล่าง และด้านขวา ด้านใน
scrollbar-3dlight-colorcolorสีขอบด้านบน และด้านซ้าย ด้านนอก
scrollbar-darkshadow-colorcolorสีขอบด้านล่าง และด้านขวา ด้านนอก
scrollbar-arrow-colorcolorสีลูกศร
scrollbar-track-colorcolorสีพื้นด้านล่าง


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



Short URL click!
<< กลับคืน : เข้าชม 8,012 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/