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.

Community · Accepted Answer · 2017-05-23 12:05:29Z

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, 2017 at 12:05

CommunityBot

11 silver badge

answered Mar 14, 2014 at 14:15

hfjn

571 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ruddy Over a year ago

.... 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

codacopia Over a year ago

this is the type of fix I am after, but yes I need something that is supported across more browsers than just chrome.

Ruddy Over a year ago

@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

codacopia Over a year ago

@Ruddy thanks. in that case it won't work for me. No IE is fine, but FF is needed.

Chintan Bhatt · Accepted Answer · 2014-03-14 15:23:27Z

<!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>

Collectives™ on Stack Overflow

CSS to hide form input field

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related