WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Single-digit inputs with one element
1497
Andev.web
Open In Editor
Publish Your Code
Recommended
2 June 2025
3d headphones
28 July 2025
HTML Message Bubble with SVG Design
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <input type="text" maxlength="6"> </body> </html>
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) */
