Personalizar ScrollBar com css

09/02/2017

CSS

Oi gente, uma d�vida: tem como personalizar a ScrollBar somente usando css?

Ou precisa de algo a mais?

Larissa Aguiar

Curtir t�pico + 1

Responder

Post mais votado

09/02/2017

Oi Larissa,

Atrav�s do Webkit voc� pode fazer coisas incr�veis! rsrs Para scrollbar n�s temos:

webkit-scrollbar

-webkit-scrollbar-button

-webkit-scrollbar-track

-webkit-scrollbar-track-piece

-webkit-scrollbar-thumb

-webkit-scrollbar-corner

-webkit-resizer

Voc� pode utilizar assim:

<html>
<head>
<style>

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

</style>
</head>
<body>

<textarea cols="7" rows="10">
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
</textarea>

</body>
</html>

Aline Bianchini

Responder

Gostei + 4

Mais Posts

10/02/2017

Larissa Aguiar

Obrigada Alinelb,

Como sempre me salvando rsrs!

Responder

Gostei + 0

13/02/2017

Aline Bianchini

Q isso Larissa!
Estamos aqui para isso, compartilhar conhecimento e nos salvar rsrs!

Responder

Gostei + 1

14/02/2017

Larissa Aguiar

Mais uma vez muito obrigada!

Responder

Gostei + 0