Munu

กำหนด Scroll bar ใน CSS

หน้าแรก » ข่าวสาร » กำหนด Scroll bar ใน CSS

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

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

มาประยุกต์ในการพัฒนาการให้บริการอยู่ตลอดเวลา เพื่อสร้างความพึงพอใจสูงสุดให้แก่ลูกค้าทุกท่าน
ด้วยประสบการณ์ที่เรามีอยู่นั้น ทำให้มั่นใจได้ว่าลูกค้าทุกท่านจะได้รับการบริการที่ดีจากเรา

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com