Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

input password field->replace bullets with images

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?

like image 925
mirek Avatar asked Aug 05 '11 06:08

mirek


People also ask

How do you mask a password in the input field in HTML?

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.

How do you create a text field for a password field?

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.

What is a password placeholder?

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.

How do I show password in password field?

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.


1 Answers

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.

like image 58
Bojangles Avatar answered Oct 11 '22 13:10

Bojangles