Стилизация ввода пароля в HTML

У меня есть пароль типа ввода, который позволяет только шестизначное число:

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

Это будет выглядеть так:

Default input appearance

Как я могу создать стиль, чтобы он выглядел следующим образом?

Desired input appearance

Ответы

Ответ 1

Решить проблему:

  • Место ::after на fieldset поле вместо поля input или добавить элемент.
  • Задайте значение content используя символы подчеркивания, и поместите элементы.
  • Добавьте width и width letter-spacing в поле input и установите :focus как outline: none чтобы удалить синюю рамку.

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>

Ответ 2

Попробуй это:

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>

Ответ 3

Обновить

  • Добавлен <input type='number'> который может регулировать font-size: 8px root font-size: 8px до 84px.

Соответствующие баллы

  • Ввод лишен границы, контура и фона.
  • Обернул ярлык вокруг ввода в виде оверлея (технически он является z-index: -1), который имеет псевдокласс ::after с значением content 6 подчеркиваний.

  • Оба входа и наложения должны иметь следующие свойства:

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

  • Наложение - это display: table и input - display: table-cell. Это (наряду с absolute и relative позиционированием) удерживает вход, жестко центрированный в оверлее.

  • rem, поэтому, если вы хотите масштабировать font-size вверх или вниз, просто измените font-size тега <html> и все будет соответствующим образом изменено:

    /* Change the 16px to whatever you want and everything scale to that value */
html, 
body {
  font: 400 16px/1.5 Consolas
}

демонстрация

Примечание. Старайтесь постоянно удерживать клавишу нажатой, и вы увидите, что нет смещения.

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: 0;
  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>

Ответ 4

Вы можете поместить элемент, содержащий "маску" за вход, и установить цвет фона ввода прозрачным. Но обратите внимание на следующие детали:

  • Используйте семейство шрифтов моноширины, чтобы ширина _ и • всегда была одинаковой.
  • Завершите свой список шрифтов monospace чтобы ОС могла выбирать шрифт с фиксированной шириной, если все указанные шрифты недоступны.
  • Пользовательский агент мог выбрать другое семейство шрифтов, размер и высоту строки для элементов ввода. Он также может выбирать другой размер и высоту строки для моноширинных шрифтов (например, medium размер может быть рассчитан как 13px вместо обычного 16px, а normal высота линии часто отключается на 1px для двух разных шрифтов одинакового размера). Поэтому убедитесь, что вы указали эти свойства явно.

Вот результат:

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>

Ответ 5

page result

Это традиционное решение может помочь для кросс-браузер:

HTML-форма:

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

Мы можем увидеть результат на входе name = real_code. Это должно быть type = 'hidden' на производстве. Измените эту максимальную длину, когда требуется больше поля.

Стиль 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>
    $(function() {

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

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

        var value = [];

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

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

    </script>

Ответ 6

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

     input[type=password]{
     border:1px;
     border-bottom-style:dashed;
     border-top-color:white;
     border-left-color:white;
     border-right-color:white;
}