Personalizar ScrollBar com css

CSS

09/02/2017

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

Ou precisa de algo a mais?
Larissa Aguiar

Larissa Aguiar

Curtidas 1

Melhor post

Aline Bianchini

Aline Bianchini

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>
GOSTEI 4

Mais Respostas

Larissa Aguiar

Larissa Aguiar

09/02/2017

Obrigada Alinelb,

Como sempre me salvando rsrs!
GOSTEI 0
Aline Bianchini

Aline Bianchini

09/02/2017

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

Larissa Aguiar

09/02/2017

Mais uma vez muito obrigada!
GOSTEI 0
POSTAR