Styling input password in HTML

Question

I have an input type password that only allow a six-digit number like this:

  Enter New Pin         


        

Answer 1

You can place an element containing "the mask" behind the input and set the background color of input to transparent. But pay attention to the following details:

• Use monospace font family so that the width of _ and • is always the same.
• End your font list with monospace so that OS can choose a fixed width font if all of the specified fonts are unavailable.
• User agent could choose a different font family, size and line height for input elements. It can also choose a different size and line height for monospace fonts (e.g. medium size could be computed as 13px instead of the usual 16px and normal line height is often off by 1px for two different fonts having same size). So make sure you specify these properties explicitly.

Here is the result:

body {
  font-family: sans-serif;
}

fieldset label,
fieldset span {
  display: block;
  margin: .5em 0;
}

fieldset .input-wrapper {
  /* positioning */
  position: relative;
  /* font */
  font: 16px/1.5 monospace;
  letter-spacing: .5em;
  /* optional */
  background-color: #EEE;
}

fieldset .input-wrapper::before {
  /* positioning */
  position: absolute;
  /* masking */
  content: "______";
}

fieldset input {
  /* positioning */
  position: relative;
  /* font */
  font: inherit;
  letter-spacing: inherit;
  /* masking */
  background-color: transparent;
  /* reset */
  margin: 0;
  border: 0;
  padding: 0;
}

  Enter New Pin
  

    
  
  New pin must be 6 digit number only