Changing the symbols shown in a HTML password field

Question

Is there any way to change the asterisks (*), or in some browsers a bullet (•), that appears in password fields in HTML?

user_5551440 · Answer

I know that is a very old question, but I faced this problem today, and I solved it using this approach: https://github.com/Mottie/input-password-bullet

Basically, I created a new font where assign the default point, to another icon. Then, only need to import the font files to the project and add a css similar to this:

@font-face {
    font-family: 'fontello';
    src: url('/fonts/fontello.eot');
    src: url('/fonts/fontello.eot') format('embedded-opentype'),
    url('/fonts/fontello.woff') format('woff'),
    url('/fonts/fontello.ttf') format('truetype'),
    url('/fonts/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    color: red;
    font-size: 16px;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

    /* add spacing to better separate each image */
    letter-spacing: 2px;
}

Hope this helps!

user_16037158 · Answer

Looks like I'm pretty late, but another potential solution is below for any looking for a workaroud. The only "bug" I didn't bother to look into was that you can't highlight and delete everyhting at once. Other than that, it works as intended, the user can input their password and they will see a string of whatever you want (in this example, a star) and their recently pressed key.

//window.onload = () => {
//  sessionStorage.text = "";
//  sessionStorage.visible = false
//}

//We will use the text and visible variables for demonstration purposes as session storage does not work with code snippets. The star can really be anything you want

const star = "*";
let text = "";
let isVisible = false;

function toggle(id) {
  const button = document.getElementById(id);
  const input = document.getElementById("password-input");
  
  switch (isVisible) {
    case false:
      button.innerText = "Hide Password";
      input.value = text;
      isVisible = true;
      break;
    case true:
      button.innerText = "Show Password";
      input.value = star.repeat(text.length);
      isVisible = false;
  }
  
  console.log(`Text When Button Clicked: ${text}`);
}

function formatInput(id) {
  //The tl:dr of this is that each key pressed (so long as it's valid which is to be determined by you) will be added to session storag which you can call from anywhere, allowing you to register stars of the correct length or text of the correct value
  
  const elem = document.getElementById(id);
  const keyPressed = event.key;
 
 //event.key should be equal to 1 unless you want it to register "Backspace" and so on as inputs. The elem.value change in the first conditional is necessary to avoid removing more than 1 character on the input; Wihtout it, we would get something like text.length = x and elem.value.length = x - 1
 
  if (keyPressed == "Backspace") {
    text = text.substring(0, text.length - 1);
    elem.value = elem.value.substring(0, elem.value.length);
    console.log(`Text at Backspace: ${text}`)
    return;
  }
  
  if (keyPressed.length == 1) {
    text = text + keyPressed;
    elem.value = text;
  }
  
  //You could use a conditional here, I just prefer switches in the case that we are checking one simple thing
  
  switch (isVisible) {
    case false:
      elem.value = star.repeat(text.length - 1)
      console.log(`Text When Password = Hidden: ${text}`)
            break;
    case true:
      elem.value = text;
      //This is required as wihtout it there is a bug that duplicated the first entry if someone decides to show the password
      elem.value = elem.value.substring(0, text.length - 1)
      console.log(`Text When Password = Visible: ${text}`)
  }
}

div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
input {
  width: 50%;
  height: 35px;
  border: 0px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
  border-radius: 5px;
  padding-left: 15px;
  letter-spacing: 2px;
  outline: none;
}
input:focus {
  border: 1px green solid;
}
button {
  height: 35px;
  background-color: rgb(94, 124, 153);
  border-radius: 5px;
  border: 0px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  width: 30%;
  margin-top: 30px;
  color: white;
}

Changing the symbols shown in a HTML password field

7 Answers