| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Single Input Multi-Box Visual</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background-color: #f0f0f0;
- margin: 0;
- }
- .input-wrapper {
- position: relative;
- width: 250px; /* Adjust based on desired number of boxes and character width */
- height: 50px; /* Height of the overall input area */
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- border-radius: 8px;
- overflow: hidden; /* Important to clip the text if it overflows slightly */
- }
- .single-char-input {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- border: none;
- background: transparent;
- font-size: 32px; /* Larger font size for visibility */
- letter-spacing: 25px; /* Adjust this to control spacing between characters */
- text-align: start;
- outline: none;
- font-family: 'Courier New', Courier, monospace; /* Crucial for fixed-width characters */
- color: #333;
- caret-color: #007bff; /* Color of the blinking cursor */
- box-sizing: border-box; /* Include padding/border in width/height */
- }
- /* Create the "boxes" using a pseudo-element and background-image */
- .input-wrapper::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none; /* Allows clicks to pass through to the input */
- background-image:
- linear-gradient(to right, #ccc 2px, transparent 2px); /* Vertical lines */
- background-size: calc(100% / 6) 100%; /* Divides the width into 6 equal parts for lines */
- background-repeat: repeat-x; /* Repeat the vertical lines */
- border: 2px solid #ccc; /* Outer border for the entire input area */
- border-radius: 8px;
- box-sizing: border-box; /* Match input's box-sizing */
- transition: border-color 0.2s ease-in-out;
- }
- /* Highlight the pseudo-element border on focus of the input */
- .single-char-input:focus + .input-wrapper::after {
- border-color: #007bff;
- box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
- }
- /* You might need to adjust letter-spacing and width/height more precisely
- based on the exact font and number of characters you expect.
- For example, if you want 6 characters:
- (width - (number_of_chars - 1) * letter_spacing) / number_of_chars
- This can get tricky quickly.
- */
- </style>
- </head>
- <body>
- <div class="input-wrapper">
- <input type="text" class="single-char-input" maxlength="6"
- pattern="[0-9]*" inputmode="numeric" placeholder="______">
- </div>
- </body>
- </html>
|
