How to style input type = "password"?

Question

How to style input type = "password"?

I need to style input like this http://prntscr.com/r46e70 How can I do this WITHOUT replacing the input type with text? Thanks!!!

2

html javascript css jquery

Author: Katya, 2020-02-18

Source

1 answers

score 3 · Accepted Answer

let $input = $('input[type="password"]'),
  $wrapperMask = $('.wrapper-mask');

$input.on('keydown', function(e) {
  if (e.keyCode == 8) {
    $('.wrapper-mask').find('span').last().remove();
  } else {
    if ($('.wrapper-mask').find('span').length > 7) return;
    $wrapperMask.append('<span class="star"></span>');
  }
})

input[type="password"]{color:#fff;height:30px;width:250px}
.wrapper{display:flex;align-items:center;max-width:250px;overflow:hidden}
.wrapper-mask{position: absolute;padding:0 5px}
.star{display:inline-block;background-image:url('https://toppng.com/uploads/preview/3d-gold-star-png-11552726957tpyco0iryc.png');background-size:contain;width:30px;height:30px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wrapper">
  <span class="wrapper-mask"></span>
  <input type="password"/>
</span>