将密码输入从子弹点更改为正方形

时间:2016-07-03 10:33:11

标签: javascript html css

我正在我的网站上创建一个简单的登录表单。大多数登录页面都有一个非常“方形”的外观,除了使用小圆圈的密码输入。

我想继续查看密码输入的“方形”,但是,似乎找不到任何我能找到的解决方案。

假设这是我HTML中的当前输入字段,我如何使用CSS将圆圈转换为密码字段中的方块?

<input type="password" name="password" id="password" autocomplete="off">

我已经在我访问过的其他网站上看到了这种效果,但我无法复制方形输入。如果没有办法在CSS中执行此操作,是否可以在JavaScript中执行此操作?

感谢。 :)

1 个答案:

答案 0 :(得分:2)

我不确定这支持多好,所以如果不支持CSS,检查支持和更改输入类型总是一个好习惯

window.onload = function() {
  init();
}

function init() {
  var x = document.getElementsByClassName("sqpass")[0];
  var style = window.getComputedStyle(x);
  if (!style.webkitTextSecurity && !style.textSecurity) {
    x.setAttribute("type", "password");
  }
}
input.sqpass {
  -webkit-text-security: square;
  text-security: square;
}
<input type="text" name="password" id="password" autocomplete="off" class="sqpass">