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>
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; */
}
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');
}
}
@+ Filou