web-dev-qa-db-fra.com

Styliser le mot de passe d'entrée en HTML

J'ai un mot de passe de type d'entrée qui n'autorise qu'un nombre à six chiffres comme celui-ci:

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

Cela montrera comme ceci:

Default input appearance

Comment puis-je le coiffer pour qu'il ressemble à ce qui suit?

Desired input appearance

htmlcssinput
21
blue

Résoudre le problème:

  • Endroit ::after sur fieldset au lieu de input ou ajoutez un élément.
  • Définissez la valeur content à l'aide de traits de soulignement et positionnez les éléments.
  • Ajouter letter-spacing et width à input et définissez :focus comme outline: none pour supprimer la boîte bleue.
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>
20
symlink

Essaye ça:

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>
11
Vikas Jadhav

Vous pouvez placer un élément contenant "le masque" derrière l'entrée et définir la couleur d'arrière-plan de l'entrée sur transparent. Mais faites attention aux détails suivants:

  • Utilisez la famille de polices monospace pour que la largeur de _ et • est toujours le même.
  • Terminez votre liste de polices avec monospace afin que le système d'exploitation puisse choisir une police à largeur fixe si toutes les polices spécifiées ne sont pas disponibles.
  • L'agent utilisateur peut choisir une famille de polices, une taille et une hauteur de ligne différentes pour les éléments d'entrée. Il peut également choisir une taille et une hauteur de ligne différentes pour les polices à espacement fixe (par exemple, medium la taille peut être calculée comme 13 pixels au lieu des 16 pixels habituels et normal la hauteur de ligne est souvent désactivée de 1 pixel pour deux polices différentes ayant la même taille). Assurez-vous donc de spécifier ces propriétés explicitement.

Voici le résultat:

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>
6
Salman A

Mise à jour

  • Ajout d'un <input type='number'> qui peut ajuster la racine font-size: 8px à 84px.

Points pertinents

  • L'entrée est dépourvue de bordure, de contour et d'arrière-plan.
  • Enveloppé une étiquette autour de l'entrée en tant que superposition (techniquement, c'est une sous-couche? z-index: -1) qui a une pseudo-classe ::after avec la valeur content de 6 traits de soulignement.

  • L'entrée et la superposition doivent avoir les propriétés suivantes:

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

  • La superposition est display: table et l'entrée est display: table-cell. Ceci (avec le positionnement de absolute et relative) maintient l'entrée rigoureusement centrée dans la superposition.

  • rem unités sont utilisées, donc si vous voulez mettre à l'échelle le font-size vers le haut ou vers le bas, changez simplement le font-size du <html> tag et tout s'ajuste en conséquence:

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

Démo

Remarque: Essayez de maintenir une touche enfoncée en continu, et vous verrez qu'il n'y a pas de décalage.

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

page result

Cette solution conventionnelle peut aider pour plusieurs navigateurs:

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

Nous pouvons voir le résultat sur input name = real_code. Il doit être de type = 'caché' lors de la production. Modifiez cette longueur maximale lorsque plus de champ est requis.

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>

Partie de script:

<script>
    $(function() {

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

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

        var value = [];

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

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

    </script>
0
Sulung Nugroho