Scrollbar css renklendirme kodu ie, chrome, firefox

merhaba arkadaşlar.

İE (internet explorer), Chrome, Firefox gbi tarayıcılarda sorunsuz çalışacak olan renkli scrollbar kodlarını artık
javascriptlere ihtiyaç duymadan ve zahmetsizce css ile yapılacak.

İnternet Explorer (ie) İçin css scrollbar renklendirme kodu

body{
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;
}

Bu kodların scrollbar da nereleri renklendirdiğini bilmiyorsanızaşağıdaki resimde size yardımcı olması için gerekli

açıklama yapılmıştır.

Bu açıklamalardan da yararlanarak güzel scrollbar lar oluşturabilirsiniz.

Chrome için css scrollbar renklendirme kodu

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

ie için yukarda renklendirme kodunu verdim aşağıda da chrome için css renklendirme kodunu veriyorum

aşağıdaki resimden faydalanarak scrollbar için renkleri düzenleyebilirsiniz.

firefox için css scrollbar renklendirme kodu

aşağıdaki kodlarla firefox için css scrollbar renklendirme yapabilirsiniz.

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}