HTML display password without <input>

Question

I would like the admin user of my app to be able to invite new users.

The flow is:

1. admin user input new user name and email
2. generate a random password for the new user
3. display name, email and password for review
4. admin user click a button, and ajax sends name, email and password to server
5. server create new user

The rest is easy, except for step 3.

What I want is something like: <p>{password}</p> , and it will be displayed as ****** for default.

If admin user want to see the password, click some button and the password will show as normal text.

I know how to do this with <input> , but is it possible without using <input> ?

---

My current solution is managing a show state for the <p> with javascript, if show === false , display <p>********</p> , else display <p>{password}</p> .

But I'd be happy to see a simpler solution without javascript .

---

UPDATE

A slightly different solution based on this ; password keeps showing even when mouse moved away.

Any element with a tabindex

could be focused

 p { position: relative; width: 100px; } p:after{ content: '*****'; position: absolute; background-color: white; right: 0; left: 0; top:0; } p:focus:after{ content: '' }

 <p tabindex="-1">password1</p> <p tabindex="-1">password2</p>

Answer 1

try this

 [data-pass]:hover:after { content: attr(data-pass); }

 <p data-pass="{password}">********</p>

now could be selected

 p { position: relative; width: 100px; } p:after{ content: '*****'; position: absolute; background-color: white; right: 0; left: 0; top:0; } p:hover:after{ content: '' }

 <p>{password}</p>

Answer 2

Thanks @ahmad, I came up with this. Would be better if the text could be selected... (pseudo element can't be selected)

 [data-pass]:before { content: "****"; } [data-pass]:hover:before { content: ""; } [data-pass]:hover:after { content: attr(data-pass); }

 <p data-pass="{password}"></p>

Answer 3

Alternative

 input[type=checkbox] { display: none; } input[type=checkbox]:checked~.remove-check { display: none; } input[type=checkbox]:checked~#password { display: block; } #password { display: none; position:absolute; top:0; left:0; background-color:yellow; padding:0; margin:0; }

 <label class="remove-check" for="chk">*****</label><input id="chk" type="checkbox"> <p id="password">{password}</p>