It doesn't seem so neat to have a button popping out on the page all of the sudden, as it makes more sense for it to be disabled, but nice information about the placeholder-shown
The "display: none;" style on the button is just a possibility: it may have been better to simply make the button slightly transparent initially, and have it be opaque when the user has typed something, but of course, there are so many ways to implement this.
For example, I am currently building a password manager, which uses the placeholder-shown trick to display an arrow icon for entering the password-vault when the user has typed content into the password field.
This is more practical implementation of the example in the article. I had used javascript for this effect in past projects. Do you have codepen for this?
Yes, I do! codepen.io/xtrp/pen/QWWGGOQ, see line 96 of CSS to see the :not(:placeholder-shown) trick in action. As I said, this is part of a password-manager desktop application I am currently building, which is open sourced on GitHub as well.
It doesn't seem so neat to have a button popping out on the page all of the sudden, as it makes more sense for it to be disabled, but nice information about the placeholder-shown
You can float it through the input (position: absolute) and padding the input for preventing text go behind the button.....
The "display: none;" style on the button is just a possibility: it may have been better to simply make the button slightly transparent initially, and have it be opaque when the user has typed something, but of course, there are so many ways to implement this.
For example, I am currently building a password manager, which uses the placeholder-shown trick to display an arrow icon for entering the password-vault when the user has typed content into the password field.
This is more practical implementation of the example in the article. I had used javascript for this effect in past projects. Do you have codepen for this?
Yes, I do! codepen.io/xtrp/pen/QWWGGOQ, see line 96 of CSS to see the :not(:placeholder-shown) trick in action. As I said, this is part of a password-manager desktop application I am currently building, which is open sourced on GitHub as well.
— Gabriel
According to usability experts, buttons should not appear and disappear, especially the crucial ones.
Source: smashingmagazine.com/printed-books...