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：我尝试使用boostrap glyphicon glyphicon-eye-open“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

使用bootstrap输入组类

<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

在输入类型文本中添加图像

2 个答案: