CSS to hide form input field

Question

I have an input field which currently looks like this: enter image description here

I would prefer the value to be hidden like this:

enter image description here

Here is the kicker, I know that giving the field a type=password will do this, but unfortunately the software I am using brings over 2 password fields in this case. So, I am left with a standard text input to create the effect.

My hope is that there is some CSS styling that I can do to the field id in order to hide the input information. Thanks for you attention to this issue.

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

You could just use:

input { -webkit-text-security: disc; /* Default */ }

as described here

Here is also a dirty hack for other browsers

edited May 23 '17 at 12:05

Community

1
1

answered Mar 14 '14 at 14:15

hfjn

57
1
7

.... for `webkit` only? Lol, don't use this. I don't even think its supported any more. Tested in `IE` 10 doesn't work. [DEMO](http://jsfiddle.net/az6c2/) – Ruddy Mar 14 '14 at 14:18
this is the type of fix I am after, but yes I need something that is supported across more browsers than just chrome. – codacopia Mar 14 '14 at 14:19
@Presto I already said it doesn't work in `IE` and lets face it, a ton of people using `IE` so don't use it. Also no, it doesn't work in FF – Ruddy Mar 14 '14 at 14:24
@Ruddy thanks. in that case it won't work for me. No `IE` is fine, but `FF` is needed. – codacopia Mar 14 '14 at 14:28

score 0 · Answer 2 · answered Mar 14 '14 at 15:23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
    function replaceT(obj){
        var newO=document.createElement('input');
        newO.setAttribute('type','password');
        newO.setAttribute('name',obj.getAttribute('name'));
        obj.parentNode.replaceChild(newO,obj);
        newO.focus();
    }
</script>
</head>
<body>
      <form>
          <input type="text" name="password"  onfocus="replaceT(this)">
      </form>
</body>
</html>

CSS to hide form input field

2 Answers2