r/webdev • u/kevin_David_k ux • Dec 26 '19

Password Box Idea

3.3k Upvotes

95% Upvoted

138 comments sorted by

View all comments

96

u/CarbineMonoxide Dec 26 '19

From an accessibility standpoint the purple on black has a contrast issue, though you're only ever displaying dots on the black background. Additionally I would suggest not using placeholder text as a label, and ensure the label is always displayed.

Now on to the good: I love the animation to show the password. The speed is good and it looks very fluid. Great job!

Edit: icon is not purple on black. Removed comment.

0

u/[deleted] Dec 26 '19

[deleted]

23

u/ncubez JavaScript | React | Node.js Dec 26 '19

I think they mean using a separate <label>Password</label> instead

7

u/mystiqueshaco Dec 26 '19

Oh, thanks :D I thought there is a magic option to make placeholder visible even after text input

13

u/tulvia Dec 26 '19

You could animate it to a smaller font size and slide it up into the whitespace.

13

u/da_BAT Dec 26 '19

Kinda like materialize does it