How to make text not visible in a text box?

Question

I want to use a textbox on WordPress as password, I don't want the text to display after inputting on the textbox. Is there any CSS code I can use to achieve this?

Below code is what I have but the text on the textbox is still visible. Kindly help look into this if there is any mistakes I'm making.

  <table border="0" style="background:#ececec" cellspacing="5">
    <tr align="left"><td>Email address</td><td><input type="text" size="30" name="name"></td></tr>
    <tr align="left"><td>Password</td><td><input type="text" size="30" name="email"></td></tr>
    <INPUT type="text" STYLE="color: #FFFFFF;
    <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Send" name='submit'><font face="arial" size="1">&nbsp;&nbsp;<a href="http://www.everythingeloma.com">Everythingeloma.com</a> by Netbuilder Ltd.</font></td></tr>
  </table>
</form>

Can you not simply use the `` ? – Lapskaus Jul 17 '19 at 12:33 — Lapskaus, Jul 17 '19 at 12:33
-webkit-text-security: disc; hope so that will help you . – Jay Jul 17 '19 at 13:14 — Jay, Jul 17 '19 at 13:14

score 0 · Answer 1 · edited Aug 02 '19 at 20:04

0

Simply use password box input box instead of text box. If you are using default text box provided by WordPress or certain plugins then you need to put code for making it look like password.

Here is the code:

<input type="password" name="password">

edited Aug 02 '19 at 20:04

Nisse Engström

4,738
23
27
42

answered Jul 17 '19 at 12:37

Iftkhar Ali Gabol

112
6

I try the code but it doesn't work, the text are still visible. I actually don't want to use the password box. – Taiwo Opabunmi Jul 17 '19 at 12:48
then use css property -webkit-text-security: disc; – Jay Jul 17 '19 at 13:14

score 0 · Answer 2 · answered Jul 17 '19 at 12:59

0

You can simple use

<input type="password" />

or

use css property -webkit-text-security

webkit only solution

.password-field{
   -webkit-text-security: disc;
}

<input class="password-field" type="text" />

answered Jul 17 '19 at 12:59

Rahul

4,294
1
10
12

Samir Patel · Answer 3 · 2019-07-18T09:13:20.530

0

Simply set colour as a textbox background colour.

.nonvisible
 {
   color:white;
 }

<input type="password" class="nonvisible">

edited Jul 18 '19 at 09:13

answered Jul 17 '19 at 13:01

Samir Patel

167
1
7

score 0 · Answer 4 · answered Jul 18 '19 at 13:10

0

Enable your text box in html mood and put

<p class="my-text">

 write your text here

</p> 

and go to the customization and add custom css

<style>
.my-text{
color:white;
}
</style>

OR

<style>
.my-text{
display:none;
}
</style>

answered Jul 18 '19 at 13:10

Iftkhar Ali Gabol

112
6

Pierre-Yves Legeay · Answer 5 · 2019-08-04T07:26:56.940

A way to do this can be :

input,
input::selection {
    background-color: #fff;
    color: #fff;
    color: rgba(255, 255, 255, 0);
}

To the previous answers using color, i added the pseudo element ::selection to avoid showing the password on a simple selection and opacity 0 to the text (which might be a bit redondant).

But this way you can still 'copy paste' the password so you might want to have a look at this post, or use something like that as attribut to your input :

oncopy="return false" oncut="return false" onpaste="return false"
ondrop="return false;" ondragstart="return false;"

That being said the easiest way to accomplish what you want is to use type='password' on your input and an rgba color with 0 for the 4th value if you don't want to see the little stars. Adding a selector with ::selection to your input will hide them also when selected.

How to make text not visible in a text box?

5 Answers5