将密码输入从项目符号更改为方框

change password input from bullet points to squares

本文关键字:方框 符号 项目 密码 输入      更新时间:2023-09-26

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

我想继续在"方框"上查看密码输入,但是,似乎找不到任何解决方案。

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

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

我在我访问过的其他网站上看到过这种效果,但我无法复制正方形输入。如果在CSS中无法做到这一点,那么在JavaScript中有可能做到吗?

谢谢。:)

我不确定这是否被支持,所以如果不支持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">