CSS: cambiar color/grosor de la barra de desplazamiento

Actualmente es muy sencillo usando solo CSS poder cambiar el «grosor» o «color» de la barra de desplazamiento o scroll del navegador web:

a). Para cambiar el ancho usamos el pseudo-elemento -webkit-scrollbar. Ejemplo:

.mi-elemento::-webkit-scrollbar{
  width: 5px;
}

b). Para cambiar el color del track (barra inferior) usamos el pseudo-elemento -webkit-scrollbar-track. Ejemplo:

.mi-elemento::-webkit-scrollbar-track {
  background-color: green;
}

c). Para cambiar el color del thumb (barra superior) usamos el pseudo-elemento -webkit-scrollbar-thumb. Ejemplo:

.mi-elemento::-webkit-scrollbar-thumb {
  background-color: orange;
}

Demo: