Meta tags:
description=Use a propriedade CSS scrollbar para criar temas personalizados para barras de rolagem. Veja valores e exemplos.;

Headings (most frequently used words):

scrollbar, pseudo, elementos, exemplo, dos, webkit, propriedade, css, sintaxe, barras, de, rolagem, padrão, entre, navegadores, prática, com, track, thumb,

Text of the page (most frequently used words):
the (72), #scrollbar (63), text (62), type (46), and (41), border (40), div (40), lorem (40), ipsum (40), dummy (40), industry (40), #webkit (39), css (31), typesetting (30), has (30), color (29), width (28), standard (21), font (21), background (20), simply (20), printing (20), been (20), ever (20), since (20), 1500s (20), when (20), unknown (20), printer (20), took (20), galley (20), scrambled (20), make (20), specimen (20), book (20), style (19), grid (18), rolagem (17), html (15), aprender (15), overflow (15), only (14), body (13), column (13), pseudo (12), elementos (12), thumb (11), not (11), para (10), track (10), survived (10), five (10), centuries (10), but (10), also (10), leap (10), into (10), electronic (10), remaining (10), essentially (10), unchanged (10), margin (10), break (10), position (9), radius (9), top (9), right (9), left (9), bottom (9), image (9), animation (9), barras (8), propriedades (8), que (8), barra (8), padding (8), height (8), stroke (8), padrão (7), navegadores (7), são (7), scrolling (7), element (7), auto (7), decoration (7), offset (7), flex (7), page (6), box (6), title (6), outline (6), align (6), variant (6), w3docs (5), todos (5), scroll (5), size (5), controle (5), elemento (5), copiar (5), 666 (5), f5f5f5 (5), chromium (5), shadow (5), max (5), 100 (5), transition (5), line (5), last (5), child (5), formatter (5), generator (4), prática (4), trilha (4), não (4), thin (4), head (4), mode (4), transform (4), fill (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), entre (3), sintaxe (3), shape (3), canto (3), vertical (3), deslizante (3), quando (3), apenas (3), aos (3), com (3), firefox (3), como (3), você (3), property (3), rgba (3), inset (3), solid (3), exemplo (3), propriedade (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), letter (3), content (3), columns (3), direction (3), clip (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), this (2), outside (2), behavior (2), orientation (2), space (2), quais (2), utilizadas (2), alterar (2), aparência (2), das (2), arrastável (2), aparece (2), inferior (2), resizer (2), horizontal (2), corner (2), piece (2), botões (2), button (2), use (2), precisar (2), mais (2), estilizar (2), partes (2), informação (2), safari (2), uma (2), primeiro (2), regras (2), duas (2), cores (2), cor (2), baseados (2), experimente (2), mesmo (2), example (2), hidden (2), document (2), doctype (2), dos (2), eee (2), styles (2), diretamente (2), maior (2), por (2), sete (2), esses (2), suportados (2), criar (2), temas (2), personalizados (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, redimensionamento, alguns, onde, encontram, parte, coberta, pelo, própria, descrição, recolorir, tornar, fina, modernos, recorra, somente, individuais, peça, alcançam, arredondamento, exclusivo, detailed, styling, based, browsers, modern, abordagem, robusta, declarar, base, seguida, acrescentar, detalhado, nos, precisam, disso, recebe, depois, define, espessura, aceita, palavras, chave, oculta, mantendo, rolável, none, funcionam, working, group, introduziu, suporta, atualmente, motores, blink, agora, também, reconhecem, 666666, cccccc, 550, ececec, serif, georgia, 600, código, aplica, contêiner, possível, direcionar, qualquer, definido, conteúdo, sua, caixa, portanto, estilizá, está, relacionado, família, permitem, controlar, forma, independente, compostos, diferentes, juntas, formam, interface, completo, seguintes, expostos, meio, prefixo, fornecedor, principalmente, compatibilidade, considere, usar, conjunto, hook, estilo, proprietário, permite, designers, nativas, navegador, veja, valores, zoom, index, writing, will, change, widows, white, user, select, bidi, underline, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, seletores, selectors, css3, guia, flexbox, guides, gradientes, nomes, tabelas, links, class, uso, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
ground repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedade css scrollbar use a propriedade css scrollbar para criar temas personalizados para barras de rolagem veja valores e exemplos o conjunto de pseudo elementos css webkit scrollbar é um hook de estilo proprietário que permite aos designers criar temas personalizados para as barras de rolagem nativas do navegador i informação esses pseudo elementos são expostos por meio do prefixo de fornecedor webkit e são suportados principalmente em navegadores baseados em chromium não são suportados no firefox ou safari para maior compatibilidade entre navegadores considere usar as propriedades padrão scrollbar width e scrollbar color os pseudo elementos webkit scrollbar são compostos por sete partes diferentes que juntas formam um elemento de interface de barra de rolagem completo esses sete pseudo elementos são os seguintes webkit scrollbar webkit scrollbar button webkit scrollbar track webkit scrollbar track piece webkit scrollbar thumb webkit scrollbar corner webkit scrollbar resizer uma barra de rolagem só aparece quando o conteúdo de um elemento é maior que sua caixa portanto estilizá la está diretamente relacionado à família de propriedades overflow overflow x e overflow y permitem controlar a rolagem horizontal e vertical de forma independente sintaxe para estilizar barras de rolagem você aplica regras css diretamente aos pseudo elementos webkit scrollbar no contêiner de rolagem é possível direcionar qualquer elemento com overflow definido como scroll ou auto não apenas o body scrolling element webkit scrollbar scrollbar styles scrolling element webkit scrollbar thumb thumb styles copiar exemplo dos pseudo elementos scrollbar exemplo de código css scrollbar doctype html html head title title of the document title style html height 100 overflow hidden body height 100 background eee overflow scroll width 85 max width 600 px margin 0 auto padding 3 em font 100 1 4 georgia serif border 1 px solid 666 p margin 0 0 1 5 em body webkit scrollbar width 1 em body webkit scrollbar track webkit box shadow inset 0 0 6 px rgba 0 0 0 0 3 body webkit scrollbar thumb background color 666 outline 1 px solid eee style head body h2 scrollbar property example h2 div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div body html copiar experimente você mesmo exemplo dos pseudo elementos scrollbar com webkit scrollbar track e webkit scrollbar thumb doctype html html head title title of the document title style html height 100 overflow hidden body height 100 background ececec overflow scroll width 90 max width 550 px margin 0 auto padding 2 em border 2 px solid cccccc p margin 0 0 1 5 em body webkit scrollbar track webkit box shadow inset 0 0 6 px rgba 0 0 0 0 3 border radius 10 px background color f5f5f5 body webkit scrollbar width 5 px background color f5f5f5 body webkit scrollbar thumb border radius 10 px webkit box shadow inset 0 0 6 px rgba 0 0 0 3 background color 666666 style head body h2 scrollbar property example h2 div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div body html copiar experimente você mesmo barras de rolagem padrão entre navegadores como os pseudo elementos webkit scrollbar funcionam apenas em navegadores baseados em chromium o css working group introduziu duas propriedades padrão que o firefox suporta atualmente e que os motores webkit blink agora também reconhecem scrollbar width e scrollbar color scrollbar width define a espessura aceita as palavras chave auto padrão thin ou none oculta a barra de rolagem mantendo o elemento rolável scrollbar color recebe duas cores primeiro a cor do thumb controle deslizante e depois a cor da track trilha scrolling element scrollbar width thin scrollbar color 666 f5f5f5 thumb track copiar uma abordagem robusta é declarar as propriedades padrão primeiro como base e em seguida acrescentar as regras webkit scrollbar para um controle mais detalhado nos navegadores chromium que precisam disso scrolling element standard firefox and modern chromium safari scrollbar width thin scrollbar color 666 f5f5f5 detailed styling chromium based browsers only scrolling element webkit scrollbar width 10 px scrolling element webkit scrollbar track background f5f5f5 scrolling element webkit scrollbar thumb background 666 border radius 10 px copiar i informação use scrollbar width thin e scrollbar color quando precisar apenas recolorir ou tornar a barra de rolagem mais fina em todos os navegadores modernos recorra aos pseudo elementos webkit scrollbar somente quando precisar estilizar partes individuais botões peça da trilha canto que as propriedades padrão não alcançam o arredondamento do thumb com border radius é exclusivo do webkit pseudo elementos pseudo elemento descrição webkit scrollbar a própria barra de rolagem webkit scrollbar button os botões da barra de rolagem webkit scrollbar track a trilha da barra de rolagem webkit scrollbar track piece a parte da trilha não coberta pelo controle deslizante webkit scrollbar thumb o controle deslizante arrastável webkit scrollbar corner o canto inferior da barra de rolagem onde as barras horizontal e vertical se encontram webkit scrollbar resizer o controle de redimensionamento arrastável que aparece no canto inferior de alguns elementos prática prática quais propriedades css são utilizadas para alterar a aparência das barras de rolagem quais propriedades css são utilizadas para alterar a aparência das barras de rolagem scrollbar width e scrollbar color scrollbar shape e scrollbar size scrollbar style e scrollbar position scrollbar orientation e scrollbar space verificar was this page helpful yes no previous scroll behavior next shape outside on this page si...