Caelan Grgurovic Caelan Grgurovic - 5 months ago 30
CSS Question

change password input from bullet points to squares

I'm creating a simple login form on my site. Most of the login page has a very "square" look to it, except for the password input which uses little circles.

I would like to continue on the "square" look into the password input, however, there doesn't seem to be any solutions I can find.

Assuming this is my current input field in my HTML, how would I use CSS to turn the circles to squares in my password field?

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


I have seen this effect on other websites that I have visited, but I can't manage to duplicate the square inputs. If there is no way to do this in CSS, would it be possible to do it in JavaScript?

Thanks. :)

Answer

I'm not sure how well is this supported, so it's always a good practice to check for support and change input type if CSS is not supported

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

Comments