WindzTrumpet โพสต์ 2017-3-9 23:45:34

การเปลี่ยนรูปแบบ Scroll Bar ด้วย CSS[มีรูป]

แก้ไขครั้งสุดท้ายโดย WindzTrumpet เมื่อ 2017-3-9 23:46

◄ตัวอย่าง►


◄วิธีการทำ►
เข้า AdminCP -> ทั่วไป -> ตั้งค่า SEO -> อื่นๆ
จากนั้นให้ดูตรงช่อง
ข้อมูลส่วนหัวอื่น ๆ
ให้นำโค้ดนี้ไปใส่
<style type="text/css">
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,255,0,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(255,0,0,0.4);
}
</style>จากนั้นกดตกลงและลองรีเฟรซหน้าเว็บบอร์ดใหม่
สั่งเกตุตรง Scroll Bar ข้างๆจะเป็นสีเหลืองเพราะผมตั้งไว้

◄วิธีเปลี่ยนสี►
ก่อนอื่นเข้าไปในเว็บและเลือกสี
https://www.w3schools.com/colors/colors_picker.asp
จำในวงเล็บของ rgb ไว้
จากนั้นไปที่โค้ดที่พึ่งใส่และค้นหา
background: rgba(255,255,0,0.8);สังเกตุตรง
rgba(255,255,0,0.8)ให้เปลี่ยนไปเป็นเลข rgb ที่ให้จำ
เช่นสีน้ำเงินจะเป็น
background: rgba(0,0,255,0.8);
ไครไม่เข้าใจอะไรคอมเม้นไว้ด้านล่างเลย
หรือต้องการรูปให้ละเอยีดกว่านี้ก็คอมเม้นบอกไว้ด้านล่างเลยครับ
หน้า: [1]
ดูในรูปแบบกติ: การเปลี่ยนรูปแบบ Scroll Bar ด้วย CSS[มีรูป]