I need to replace the bullets in an <input type="password">
field with any image (the same for all bullets). Can this be achieved using CSS or JavaScript?
Complete HTML/CSS Course 2022 To take password input in HTML form, use the <input> tag with type attribute as a password. This is also a single-line text input but it masks the character as soon as a user enters it.
The <input> tag with a type="password" attribute creates a text field where users can securily enter a password. As characters are entered, they are replaced by a dot ("•") or asterisk ("*") symbol, depending on the browser.
The placeholder attribute specifies a short hint that describes the expected value of a password field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the password field before the user enters a value.
Right-click the password field and click Inspect Element. A gray bar will appear with the password field highlighted. Press Alt+M or click on the icon shown below to open the Markup Panel. It will show you the code for the password field.
Right. I've had a noodle on JSFiddle and I've come up with http://jsfiddle.net/jamwaffles/SzuD4/.
It's far from perfect, but it's a starting point. Basically, you need to position a div
over the input
. When the div
is clicked, jQuery (sorry, but it's still JavaScript) will focus the input, making it typeable.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With