CSS隐藏表单输入字段答案

【问题标题】：CSS to hide form input fieldCSS隐藏表单输入字段
【发布时间】：2014-03-14 14:11:31
【问题描述】：

我有一个输入字段，目前看起来像这样：

我希望像这样隐藏值：

这是踢球者，我知道给该字段一个type=password 会做到这一点，但不幸的是，我使用的软件在这种情况下会带来超过 2 个密码字段。所以，我留下了一个标准的文本输入来创建效果。

我希望我可以对字段 id 做一些 CSS 样式，以隐藏输入信息。感谢您对这个问题的关注。

【问题讨论】：

标签： css input passwords field customization

【解决方案1】：

你可以使用：

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

如here所述

Here 对其他浏览器来说也是一种肮脏的黑客攻击

【讨论】：

.... 仅适用于webkit？大声笑，不要使用这个。我什至认为它不再支持了。在IE 10 中测试不起作用。 DEMO
这是我所追求的修复类型，但是是的，我需要更多浏览器支持的东西，而不仅仅是 chrome。
@Presto 我已经说过它在IE 中不起作用，让我们面对现实吧，很多人都在使用IE，所以不要使用它。也不，它在 FF 中不起作用
@Ruddy 谢谢。在那种情况下，它对我不起作用。没有IE 很好，但需要FF。

【解决方案2】：

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

【讨论】：