[RESOLU] Mise en page input

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Mise en page input

Mise en page input

par filou80 » 20 avr. 2023, 22:11

Bonjour à tous,

J'ai besoin d'aide par rapport a la mise en forme je souhaite que mon oeil soit au bout de mon input (balise i).
cela le fait mais cela fait un block aussi grand que mon input.
J'utilise bootstrap je sais pas ci cela peut aider.
Voici mon html :

Code : Tout sélectionner

<div class="col-8 input-group"> <div class="input-group-text iconesConnexionInscription"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16"> <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/> </svg> </div> <input type="password" name="password" autocomplete="off" class="form-control" maxlength="22" id="pass" oninput="hiddenscript()" required=""> <i class="fas fa-eye form-control" id="eye" onclick="Showfunction()"></i> </div>
voici mon css :

Code : Tout sélectionner

/* .fas { display: block; float: right; margin-right: 15px; margin-top: -45px; position: relative; color: #555; font-size: 23px; cursor: pointer; z-index: 3; display: none; } */ /* #eye { display: none; } */ #eye { /* position: relative; */ /* margin-left: -30px; margin-top: -28px; */ color: #555; font-size: 23px; cursor: pointer; /* z-index: 3; */ }
voici mon JS :

Code : Tout sélectionner

function hiddenscript() { var eye = document.getElementById("eye"); if (document.getElementById("pass").value.trim().length == 0) { eye.style.display = "none"; } else { eye.style.display = "block"; } } function Showfunction() { var eye = document.getElementById("eye"); var eye2 = document.getElementById("eye2"); var pass = document.getElementById("pass"); var value = document.getElementById('pass').value; if (value.length > 0) { eye.style.display = "block"; } if (pass.type === "password") { pass.type = "text"; eye.classList.toggle('fa-eye'); eye.classList.toggle('fa-eye-slash'); } else { pass.type = "password"; eye.classList.toggle('fa-eye'); eye.classList.toggle('fa-eye-slash'); } }
Merci par avance pour votre aide.
@+ Filou