Comments on: HTML & CSS for a One-Time Password Input https://frontendmasters.com/blog/html-css-for-a-one-time-password-input/ Helping Your Journey to Senior Developer Fri, 28 Feb 2025 23:30:47 +0000 hourly 1 https://wordpress.org/?v=6.9 By: Chris Coyier https://frontendmasters.com/blog/html-css-for-a-one-time-password-input/#comment-22694 Fri, 28 Feb 2025 23:30:47 +0000 https://frontendmasters.com/blog/?p=5067#comment-22694 In reply to Jason McNeill.

I feel like the one big thing is just how majorly obvious it makes how many digits/characters the code you’re looking for is. You see the big four boxes, you get a text message or email that has four digits in it, you know you’re probably looking at the right thing.

I ain’t necessarily advocating for it, but that’s the rub.

]]>
By: Jason McNeill https://frontendmasters.com/blog/html-css-for-a-one-time-password-input/#comment-22686 Fri, 28 Feb 2025 18:22:18 +0000 https://frontendmasters.com/blog/?p=5067#comment-22686 What value is provided even by the visual theater of the boxes? Like you said, boxes can create confusion that pasting is either not allowed or maybe the pasted value could be truncated.

Just take one field. If you know it will be numeric, then apply a regex pattern to the text input. Then upon the correct sequence being entered, just auto-submit the form.

]]>
By: M. Inam https://frontendmasters.com/blog/html-css-for-a-one-time-password-input/#comment-21272 Sat, 08 Feb 2025 03:24:58 +0000 https://frontendmasters.com/blog/?p=5067#comment-21272 In reply to Temani Afif.

Your solution looks cleaner to me

]]>
By: Temani Afif https://frontendmasters.com/blog/html-css-for-a-one-time-password-input/#comment-21171 Thu, 06 Feb 2025 07:33:29 +0000 https://frontendmasters.com/blog/?p=5067#comment-21171 I made something similar using gradients without a lot of magic numbers but CSS variables to control everything: https://css-tip.com/single-digit-inputs/

]]>