¿Cómo formateo el estilo de la barra de desplazamiento en un área de texto?

Estoy seguro de que esto no debería ser tan difícil como parece ... No puedo usar un panel de desplazamiento JQuery porque necesito que actúe como un formulario de texto estándar cuando se envía .. necesita funcionar en IE7 +, Safari & firefox al menos ... alguna idea?¿Cómo formateo el estilo de la barra de desplazamiento en un área de texto?

intentado esto ...

textarea { 
    scrollbar-face-color: #ff8c00; 
    scrollbar-track-color: #fff8dc; 
    scrollbar-arrow-color: #ffffff; 
    scrollbar-highlight-color: #fff8dc; 
    scrollbar-shadow-color: #d2691e; 
    scrollbar-3dlight-color: #ffebcd; 
    scrollbar-darkshadow-color: #8b0000; 
}

... pero sólo funciona en IE?

¿Alguna idea?

Fuente

2011-08-16 Chris Carruthers

posible duplicado de [¿Cómo Estilo la barra de desplazamiento de un área de texto] (http: // stackoverflow.com/questions/3742389/how-do-i-style-the-scrollbar-of-a-textarea) – Curt

Solo para WebKit: http://stackoverflow.com/questions/4641169/apple-like-scrollbars-using -css/4641257 # 4641257 – thirtydot

Nunca he hecho esto, así que no estoy completamente seguro de esto, pero recuerdo que uno de mis colegas estaba haciendo esto para un sitio que estábamos desarrollando y tenía el mismo problema menor.

Creo que está a lo largo del camino correcto, aunque las propiedades de barra de desplazamiento tienen que estar en el css cuerpo de esta manera:

body { 
scrollbar-face-color: #ff8c00; 
    scrollbar-track-color: #fff8dc; 
    scrollbar-arrow-color: #ffffff; 
    scrollbar-highlight-color: #fff8dc; 
    scrollbar-shadow-color: #d2691e; 
    scrollbar-3dlight-color: #ffebcd; 
    scrollbar-darkshadow-color: #8b0000; 
}

tal vez usted podría tratar de darle a la propiedad área de texto y la identificación deseada y aplicar que, en el css, por lo que:

textarea.(insertrelevantID) { 
..... 
}

Fuente

2011-08-16 14:02:27 RSM

Hola gracias, desafortunadamente esto no parece estar funcionando bien, luchando por encontrar algo en línea, aunque hubiera tenido Pensé que esto debería ser bastante sencillo –

@chris ... respuesta actualizada con otra posible solución – RSM

Se puede utilizar esta secuencia de comandos:

http://studio.radube.com/html-textarea-custom-scrollbar

Sin embargo, creo que siempre tendrá problemas para diseñar una barra de desplazamiento textarea en CSS puro debido al hecho de que el navegador lo muestra como quiera.

Fuente

2011-08-16 14:08:20 Curt

Uso -webkit-scrollbar pseudo-elementos de barra de desplazamiento:

textarea::-webkit-scrollbar { 
    width: 1em; 
} 

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

textarea::-webkit-scrollbar-thumb { 
    background-color: darkgrey; 
    outline: 1px solid slategrey; 
}

Puede encontrar más detalles aquí: https://css-tricks.com/almanac/properties/s/scrollbar/

Fuente

2017-10-09 03:47:49

¿Cómo formateo el estilo de la barra de desplazamiento en un área de texto?

Respuesta

Cuestiones relacionadas