javascript - 将密码输入从元素符号点更改为正方形

Question

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

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

假设这是我当前在我的 HTML 中的输入字段，我将如何使用 CSS 将我的密码字段中的圆圈变成正方形？

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

我在我访问过的其他网站上看到过这种效果，但我无法复制方形输入。如果在 CSS 中无法做到这一点，是否可以在 JavaScript 中做到这一点？

谢谢。 :)

Answer 1

我不确定它的支持情况如何，所以检查支持情况并在不支持 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">