<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Single-digit inputs with one element</title> <style> input[type="text"] { --w: 1ch; /* control the width for each letter */ --g: 0.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; } </style> </head> <body> <input type="text" maxlength="6" /> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » input验证码输入框 喜欢 (0)or分享 (0)
