在输入文字内添加图像

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