Cambiar el color de las barras de scroll

26/Nov/2007 CSS , , 12 Comentarios

Si queremos cambiar el color de las barras de scroll de nuestra página podemos utilizar propiedades CSS. Si bien tenemos que tener en cuenta que estas propiedades no están soportadas por el estándar CSS de la W3C.

Es decir, que depende del navegador web que estemos utilizando y del soporte que de sobre estas etiquetas. En un barrido pequeño de los navegadores más utilizados creo que solo es el Internet Explorer 5.5+.

Pero, si utilizo las propiedades CSS ¿Que pasa cuando entro con otro navegador? Pues nada, el resto de navegadores las omitirán y utilizaran los datos que tengan del navegador para colorear las barras de scroll.

Las propiedades CSS de scroll que podemos utilizar son las siguientes:

  • scrollbar-3dlight-color, color del borde que hace el efecto 3D en la barra de scroll.
  • scrollbar-arrow-color, color de las flechas.
  • scrollbar-base-color, es el color genérico a utilizar por la barra de scroll. Podríamos utilizar únicamente este para dar color a la barra.
  • scrollbar-darkshadow-color, sombra de la barra de progreso.
  • scrollbar-face-color, el color de lo que es realmente la barra de progreso. Es decir, del bloque que se mueve por la barra.
  • scrollbar-highlight-color, el color del fondo de la barra.
  • scrollbar-shadow-color, son los dos botones sobre los que podemos pulsar para desplazar la barra.
  • scrollbar-track-color, es el color de fondo de la barra de scroll.

A las propiedades las asignaremos un color dentro de un área de código CSS. Quedará como el código que sigue:

  1. body {
  2. scrollbar-face-color:fuchsia;
  3. scrollbar-highlight-color:yellow;
  4. scrollbar-3dlight-color:orange;
  5. scrollbar-darkshadow-color:darkblue;
  6. scrollbar-shadow-color:gray;
  7. scrollbar-arrow-color:yellow;
  8. scrollbar-track-color:aqua;
  9. }

Vemos que las propiedades las asignamos al elemento HTML body, para que de esta manera afecte a todos los elementos con scroll de la página.

Solo nos quedará añadir a nuestra página un elemento que tenga scroll. Para ello utilizamos un textarea.

  1. <textarea rows="15">
  2. ...
  3. </textarea>

Hay que indicar, que no hemos encontrados un navegador que aplique esto al scroll de la propia página.

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

12 comentarios en “Cambiar el color de las barras de scroll”

Víctor Cuervo

Víctor Cuervo

@julian|camisas,

Pues la verdad que esta técnica solo quedo para algunos navegadores Internet Explorer. Pero ninguno más lo siguió. Ahora Webkit está empezando a trabajar en dar estilo a las barras de scroll con CCS3.

Los selectores son:

-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer

Espero poder escribir algo al respecto en breve.

Saludos.

Víctor Cuervo

julian|camisas

Funciona bien en todos los navegadores? o como en todo hay que hacer condicionales o algo para ie

Víctor Cuervo

cristina

o funciona en MAC

Víctor Cuervo

terexto

QUE ALGUIEN ME DIGA POR QUE NO FUNCIONA, Y EL NOTE PAD++ NO RECONOCE EL CODIGO.

Víctor Cuervo

terexto

no funciona

Víctor Cuervo

Leo

a mi no me funciona y quiero cambiarle los colores a las scrollbars de los frames pero nada :S

Víctor Cuervo

arthur

Gracias por el tip ya lo estoy probando y me funciona

Víctor Cuervo

lineadecodigo

@Romina,

Tendrías que poner el código dentro de las etiquetas <HEAD> y </HEAD> de la página.

Víctor Cuervo

Romina

pero donde se pone escodigo..eso es lo que quiero saber, dice que funciona con internet explorer, eso es ebvio pero a done me voy para dar con ese lugar. santo y seña por favor

por sierto saludos di con esta pagina por esa razon ojala me entiendan o entiendas xD.

Víctor Cuervo

Joaquin

solamente funciona en internet explorer, debe ser eso

Víctor Cuervo

shirahime

he estado poniendo en mi web ese codigo para hacer la barra de color pink o fucshia pero no me lo cambia de color :S

Víctor Cuervo

haf

Ok

Los comentarios están cerrados.