在輸入文字內添加圖像

Question

我試圖在特定時間使用眼睛圖標顯示密碼。我嘗試添加類併爲該輸入添加背景圖像。但高度和寬度比文本框大。當試圖更改高度時，輸入大小隨背景img在輸入內部而減小。

有什麼辦法可以解決這個問題嗎？

$("#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和它那工作的罰款。

Answer 1

您可以使用背景大小的高度和寬度，檢查我的編輯

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

使用background-size: 10px 10px;在CSS來調整背景圖像的大小

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