1

Мне нужно стилизовать input вот таким образом http://prntscr.com/r46e70 Как можно это сделать БЕЗ замены типа инпута на text? Спасибо!!!

4
  • 1
    А сейчас какой тип у input стоит у Вас?
    – Denis640Kb
    18 фев 2020 в 17:13
  • input type="password"
    – Katya
    18 фев 2020 в 17:15
  • 1
    Вам нужны просто звёздочки вместо точек, или именно такие?
    – Denis640Kb
    18 фев 2020 в 17:18
  • именно такие...
    – Katya
    18 фев 2020 в 17:20

1 ответ 1

4

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>

1
  • 1
    Ну тогда уж проще использовать unicode, если брать именно картинку )))
    – Denis640Kb
    18 фев 2020 в 20:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.