MargoUtomo.Net > About CSS > Merubah Warna Scrollbar

Merubah Warna Scrollbar

23 September 2011 oleh Admin | 410 pembaca 5 komentar »

Pada saat mendesain sebuah halaman web, sering kita menginginkan semua warnanya harmonis sesuai keinginan kita. Apabila temanya biru, elemen-elemen yang lain akan diberi warna-warna yang harmonis dengan warna biru tersebut. Sehingga mata para pengunjung website lebih nyaman dan bisa menjadi lebih betah berkunjung di website atau blog tersebut.

Tetapi terkadang masalah muncul pada saat design kita terlalu lebar atau panjang dari screen pengunjung atau kotak textarea yang kita berikan terlalu kecil sehingga muncul scrollbar untuk memudahkan pengunjung untuk menggeser-geser. Yang jadi masalah adalah warna scrollbar selalu standard yaitu abu-abu. Jadi apabila desainnya tidak harmonis dengan warna abu-abu, lalu muncul warna abu-abu, tentu akan mengganggu. Kali ini kita akan mencoba merubah warna scrollbar tersebut.

Untuk merubah warna scrollbar kita akan menggunakan property scrollbar pada CSS kita, dimana :

Untuk merubah warna scrollbar browser, maka kita tambahkan property scrollbar pada element <body>
Untuk merubah warna scrollbar textarea, maka kita tambahkan property scrollbar pada element <textarea>

Untuk atribut scrollbar yang dapat digunakan ada 2 cara, yaitu

Hanya warna dasar dengan atribut scrollbar-base-color
Semua detil warna dengan atribut scrollbar-3dlight-color,scrollbar-arrow-color,scrollbar-base-color,scrollbar-darkshadow-color,scrollbar-face-color,scrollbar-highlight-color,scrollbar-shadow-color.

Dengan hanya warna dasar tentu akan lebih simpel, tetapi bila ingin warna scrollbar yang lebih detail lagi, kita manfaatkan semua atributnya.

Contoh :

Sebelum tag <head> kita tambahkan :

<style type="text/css">

body {scrollbar-base-color:#369;}

</style>

Maka akan dihasilkan seperti gambar dibawah sebelah kanan

Dan apabila ingin lebih detail lagi warna-warna yang akan digunakan maka kita coba dengan pengisian atribut sbb :

<style type="text/css">

body {scrollbar-3dlight-color:#ff0000; scrollbar-arrow-color:#ffff00; scrollbar-base-color:#000080; scrollbar-darkshadow-color:#00ff00; scrollbar-face-color:#ff00ff; scrollbar-highlight-color:#00ffff; scrollbar-shadow-color:#ff8c00; scrollbar-track-color:#000000}

</style>

Dimana :

Kode	Warna
#FF0000
#FFFF00
#000080
#00FF00
#FF00FF
#00FFFF
#FF8C00
#000000

Maka akan menghasilkan warna-warna yang berbeda pada beberapa bagian dari scrollbar tersebut seperti berikut ini

Warnanya sudah berubah total dan "berantakan" karena sengaja agar lebih jelas terlihat cara merubah warna scrollbarnya. Tetapi atribut ini hanya bekerja pada browser Internet Explorer 5.5 keatas. Selain itu, scrollbar akan terlihat seperti scrollbar biasa.