voidgg โพสต์ 2014-9-6 11:13:48

ปรับแต่ง scroll bar ให้สวย

ปรับแต่ง scroll bar ให้สวย
<font size="3" style="font-family: 'Comic Sans MS'; line-height: 1.5;"><style type="text/css" media="screen">
::-webkit-scrollbar {width: 8px; height:3px; }
::-webkit-scrollbar {
width: 7px;
height: 3px;
}
::-webkit-scrollbar-track-piece {
background-color: ‪#‎FFFFFF‬;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical {
width: 5px;
background-color: ‪#‎ff9d00‬;
-webkit-border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:vertical:hover {
background-color: #ff9d00;
}
::-moz-selection {
background: #ff9d00;color:#FFFFFF;
}
::selection {
background: #ff9d00;color:#FFFFFF;
}</font>
เปลี่ยนสีโค๊ดปรับสีปรับขนาดได้ตามโค๊ด
นำโค๊ดนี้ใส่ที่ไฟล์ extend_common.css หรือ header.htm ส่วนบนของเทมเพลทที่ใช้
ทดสอบแล้วใช้ได้ในหลายเทมเพลท หลายเวอร์ชัน
ตัวอย่าง 3.2 http://rst.in.th/forum.php




voidgg โพสต์ 2014-9-6 11:17:17

แก้ๆใส่ผิด
<style type="text/css" media="screen">
::-webkit-scrollbar {width: 8px; height:3px; }
::-webkit-scrollbar {
width: 7px;
height: 3px;
}
::-webkit-scrollbar-track-piece {
background-color: ‪#‎FFFFFF‬;
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical {
width: 5px;
background-color: ‪#‎ff9d00‬;
-webkit-border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:vertical:hover {
background-color: #ff9d00;
}
::-moz-selection {
background: #ff9d00;color:#FFFFFF;
}
::selection {
background: #ff9d00;color:#FFFFFF;
}
</style>

load1part โพสต์ 2014-10-11 21:42:27

ผมยังไม่เข้าใจเลยครับ scroll bar มันดูตรงส่วนไหนหรอครับ {:31_1198:}

mrdeep โพสต์ 2014-10-14 23:22:27

load1part ตอบกลับเมื่อ 2014-10-11 21:42
ผมยังไม่เข้าใจเลยครับ scroll bar มันดูตรงส่วนไหนหรอครับ

แถบเลื่อน ขวาสุดไงครับ

rogers โพสต์ 2015-6-7 14:13:29

ขอบคุณมากมายครับ
หน้า: [1]
ดูในรูปแบบกติ: ปรับแต่ง scroll bar ให้สวย