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

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

1 个答案: