WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Entradas de um dígito com um elemento
1496
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
2 March 2025
Um Código por junca
22 August 2025
Comentário de espaço reservado para código HTML
16 November 2024
Como criar uma barra lateral de grade em CSS
HTML
Copy
Andev Web
CSS
Copy
input[type=text] { --w: 1ch; /* control the width for each letter */ --g: .15em; /* the gap between letters */ --b: 2px; /* the border thickness */ --n: 6; /* the number of letters */ --c: #888; font-size: 70px; line-height: 1.5; /* control the height */ letter-spacing: var(--w); font-family: monospace; width: calc(var(--n)*(1ch + var(--w))); padding-left: calc((var(--w) - var(--g))/2); clip-path: inset(0 calc(var(--w)/2) 0 0); background: repeating-linear-gradient(90deg, var(--c) 0 var(--b),#0000 0 calc(1ch + var(--w) - var(--g) - var(--b)), var(--c) 0 calc(1ch + var(--w) - var(--g)),#0000 0 2ch), conic-gradient(at calc(100% - var(--g) - 1px) var(--b),#0000 75%,var(--c) 0) 0 0/calc(1ch + var(--w)) calc(100% - var(--b)); border: none; outline: 0; } input[type=text]:focus-visible { --c:#000; } body { margin: 0; min-height: 100vh; display: grid; place-content: center; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */