Ein Bild in den Text eingeben

Question

Ich versuche, das Passwort mit einem Augensymbol für bestimmte Zeit zu zeigen. Ich versuchte, Klasse hinzuzufügen und fügte das Hintergrundbild für diese Eingabe hinzu. Aber die Höhe und die Breite werden größer als das Textfeld ausgerichtet. Beim Versuch, die Höhe zu ändern, verringerte sich die Eingabegröße, da der Hintergrund img innerhalb der Eingabe ist.

Gibt es eine Möglichkeit, dies zu beheben?

$("#ShowCurrentPassword").click(function(){ 
 
$('#Password').attr('type', 'text'); 
 
setTimeout(function(){$('#Password').attr('type', 'password'); }, 900); 
 
});

input{ 
 
background: url("eye.png") no-repeat fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="" class="col-sm-4 control-label">Current Password</label> 
 
    <div class="col-sm-7"><input type="password" class="form-control" id="Password" placeholder=""></div> 
 
    <div class="col-sm-1"> <i class="glyphicon glyphicon-eye-open" id="ShowCurrentPassword"></i></div> 
 
              
 
</div>

P. S: Ich habe versucht, mit Bootstrap glyphicon glyphicon-Augen-offen "id =" ShowCurrentPassword und es s gut funktioniert.

Answer 1

Sie Hintergrund-Größe für Höhe und Breite verwenden können, überprüfen Sie meine Änderungen

$("#ShowCurrentPassword").click(function(){ 
 
$('#Password').attr('type', 'text'); 
 
setTimeout(function(){$('#Password').attr('type', 'password'); }, 900); 
 
});

input{ 
 
background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/7467-200.png) no-repeat; 
 
background-size: 25px; 
 
background-position: 2%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="" class="col-sm-4 control-label">Current Password</label> 
 
    <div class="col-sm-7"><input type="password" class="form-control" id="Password" placeholder=""></div> 
 
    <div class="col-sm-1"> <i class="glyphicon glyphicon-eye-open" id="ShowCurrentPassword"></i></div> 
 
</div>

Answer 2

Verwenden background-size: 10px 10px; in CSS, um die Hintergrundbildgröße, um die Größe

Answer 3

Verwenden Bootstrap-Input-Gruppe Klassen

<div class="input-group"> 
    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> 
    <span class="input-group-addon" id="basic-addon2">@example.com</span> 
</div> 

https://www.tutorialspoint.com/bootstrap/bootstrap_input_groups.htm