Reputation: 1795

Styling input password in HTML

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

<fieldset>
  <label for="password-input">Enter New Pin</label>
  <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
  maxlength="6" size="6" value="">
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

It will show like this:

How can I style it so it can look like the following?

Upvotes: 23

Answers (5)

zer00ne

Reputation: 43853

Update

Added a <input type='number'> which can adjust the root font-size: 8px to 84px.

Relevant Points

The input is stripped of border, outline, and background.
Wrapped a label around the input as an overlay (technically it is an underlay? z-index: -1) which has a pseudo-class ::after with the content value of 6 underscores.

Both input and overlay must have the following properties:

  /* The values can anything as long as it is valid and are the same */
  letter-spacing: 10px;
  font-size: 1.2rem;
  font-weight: 900;

The overlay is display: table and the input is display: table-cell. This (along with absolute and relative positioning) keeps the input rigidly centered in the overlay.
rem units are used so if you want to scale the font-size up or down, just change the font-size of the <html> tag and everything adjusts accordingly:
```
  /* Change the 16px to whatever you want and everything scale to that value */
  html, 
  body {
    font: 400 16px/1.5 Consolas
  }
```

Demo

Note: Try keeping a key pressed continuously, and you'll see that there's no shifting.

var node = document.querySelector('#fSz');
node.oninput = setFontSize;

function setFontSize(e) {
  var tgt = e.target;
  var root = document.documentElement;
  root.style.setProperty(`--${tgt.id}`, `${tgt.valueAsNumber}px`);
}

:root {
  --fSz: 16px;
}

html,
body {
  font-size: var(--fSz);
  font-weight: 400;
  line-height: 1.5;
  font-family: Consolas, 'sans serif', monospace;
}

fieldset {
  position: relative;
  display: table;
  min-height: 5.5rem;
  padding: 0 0 0 0.3125rem;
  margin-top: 2em;
  overflow: visible;
}

fieldset * {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

legend {
  font-size: 1.2rem;
}

.overlay {
  display: table;
  position: relative;
  top: 0.3125rem;
  left: 0.9375rem;
  font-size: 1.2rem;
  font-weight: 900;
}

.overlay::after {
  content: '\ff3f\ff3f\ff3f\ff3f\ff3f\ff3f';
  font-size: 1.2rem;
  letter-spacing: 0.78rem;
}

@-moz-document url-prefix() {
  .overlay::after {
    content: '\2501\2501\2501\2501\2501\2501';
    text-shadow: 0.65rem 0px 0px #222;
    font-size: 1.37rem;
    letter-spacing: 1.2rem;
    line-height: 2;
  }
}

.hint {
  display: block;
  position: absolute;
  bottom: -2rem;
  left: 0.625rem;
  font-style: italic;
  font-size: 0.75rem;
}

#password-input {
  display: table-cell;
  border: 0px none transparent;
  outline: 0px none transparent;
  background: transparent;
  position: absolute;
  left: 0px;
  z-index: 1;
  overflow: hidden;
  line-height: 2;
  transform: translate(0.25rem, -1rem);
  letter-spacing: 1.25rem;
  font-size: 1.35rem;
  font-weight: 900;
}

sup {
  padding-top: 0.25rem;
  font-size: 0.65rem
}

.fc {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  font: 400 16px/1.5 Consolas;
  width: 50%;
}

#fSz {
  display: inline-block;
  padding-left: 8px;
  width: 52px;
  font: inherit;
  text-align: center;
}

<label for='fSz' class='fc'>Font-Size: 
  <input id='fSz' type='number' min='8' max='84' value='16' step='0.5'>&nbsp;px
  </label>

<fieldset>
  <legend>Enter New Pin</legend>
  <label for='chk' class='overlay'>
     <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="19" value="123456" placeholder='123456'>
     </label>
  <label for="password-input" class="hint"><sup>&#128956;</sup>New pin must be 6 digit number only</label>

</fieldset>

Upvotes: 7

symlink

Reputation: 12209

Since you can't use the ::after pseudo-element on your input box, use it on fieldset (or if you can alter the HTML, add an element). Then give it a content value using underscores, and position the elements where you want them. Finally, add letter-spacing and width to your input box, and give it a :focus of outline: none to get rid of the blue box.

fieldset {
  color: #555;
  font-family: sans-serif;
  border: none;
  position: relative;
}

fieldset > * {
  display: block;
}

fieldset::after {
  content: "___  ___  ___  ___  ___  ___";
  display: block;
  position: absolute;
  top: 35px;
  white-space: pre;
}

label {
  font-size: 14px;
  margin-bottom: 6px;
}

input#password-input {
  position: relative;
  font-size: 16px;
  z-index: 2;
  border: none;
  background: transparent;
  width: 300px;
  text-indent: 9px;
  letter-spacing: 25.6px;
  font-family: Courier;
}

input#password-input:focus {
  outline: none;
}

span.hint {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
}

span.hint::before {
  content: "* ";
}

<fieldset>
  <label for="password-input">Enter New Pin</label>
  <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

Upvotes: 25

Sulung Nugroho

Reputation: 1683

This conventional solution may help for cross browser :

The HTML form :

<p class="text-center">Enter new pins</p>
     <form role="form" method="post">
        <div class="form-group text-center">

                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >

                <small class="text-danger">New pin must be 6 digit number only</small>      
            </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-block">Verify Pin
            </button>
        </div>
        <input id="code_hidden" maxlength="6" name="real_code" type="text" >
    </form>

We can see the result on input name = real_code. It must be type = 'hidden' on production. Change this maxlength when more field is required.

Style CSS :

<style>
.inputbox {
    background-color: #fff;
    border: none;
    border-bottom: thin solid gray;
    width: 20px;
    font-size: 24px;
    margin-bottom: 20px;
    margin-right: 5px;
}
</style>

Script part :

<script>
    $(function() {

    $(".inputbox").keyup(function () { 

        $(this).next('.inputbox').focus();

        var value = [];

        $('.inputbox').each(function() {
          value += $(this).val();  
        }); 

         $('#code_hidden').val(value); 
        });
    });

    </script>

Upvotes: 0

Salman Arshad

Reputation: 272006

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;
}

<fieldset>
  <label for="password-input">Enter New Pin</label>
  <div class="input-wrapper">
    <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" value="">
  </div>
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

Upvotes: 7

Vikas Jadhav

Reputation: 4692

Try this:

input {
  padding-left: 15px;
  letter-spacing: 39px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 3px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 280px;
  font-size: 30px;
}

input:focus {
  outline: none;
}

<fieldset>
  <label for="password-input">Enter New Pin</label>
  <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

Upvotes: 14

Styling input password in HTML

Answers (5)

Update

Relevant Points

Demo

Related Questions