入力タイプのテキスト内に画像を追加する

Question

特定の時間、目のアイコンを使用してパスワードを表示しようとしています。私はクラスを追加しようとしましたが、その入力の背景画像を追加しようとしました。しかし、高さと幅がテキストボックスより大きくなりました。高さを変えようとすると、背景が入力の中にあるので入力サイズが小さくなりました。

これを解決する方法はありますか？

$("#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：私はブートストラップglyphicon glyphicon-目を開いて "ID =" ShowCurrentPassword、それが働いsの罰金を試してみました。

Answer 1

のサイズを変更するには、CSSで使用background-size: 10px 10px;あなたは高さと幅のためのバックグラウンド・サイズを使用することができ、私の編集をチェック

$("#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

背景画像のサイズ

Answer 3

使用ブートストラップ入力グループクラス

<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