logo标签列表

在输入框右侧添加响应式的“fa eye”图标

htmlcss
9

我正在尝试在右侧添加一个眼睛的图标。在我的原始代码中，它显示在右侧，但不是响应式的，并且当屏幕大小改变时会移动。

下面是一个简单的实现。我希望它应该在两个密码字段的输入框结束之前的右侧显示。目前它确实显示了，但不正确。请在全屏模式下测试。

.login-form {
 margin: 20px 0 0 0;
}

.login-form input[type=text] {
 background: #fff;
 border: none;
 border-radius: 8px;
 position: relative;
 font-size: 15px !important;
 display: inline-block;
 outline: none;
 width: 100%;
 height: 30px !important;
 padding: 18px 0 18px 20px;
 margin-bottom: 15px !important;
 color: #666 !important;
 border: 1px solid grey;
}

.login-left {
 width: 44%;
 margin: 0 0 0 5%;
 display: inline-block;
 float: left;
}

.login-right {
 width: 44%;
 margin: 0 5% 0 0;
 display: inline-block;
 float: right;
}

@media screen and (max-width:767px) {
 .login-width {
  width: 95% !important;
 }
 .login-left {
  width: 90%;
  margin: 0 auto;
  display: block;
  float: none;
 }
 .login-right {
  width: 90%;
  margin: 0 auto;
  display: block;
  float: none;
 }
}

.p-viewer {
 z-index: 9999;
 position: absolute;
 left: 560px;
 margin-top: -60px;
}

.fa-eye {
 color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="login-form">
<div class="login-left">
   <div class="clearfix"></div>
   <input type="text" placeholder="Email *"/>
   <div class="clearfix"></div>
   <input type="text" placeholder="Password *"/>
   <span class="p-viewer">
   <i class="fa fa-eye" aria-hidden="true"></i>
   </span>
   <div class="clearfix"></div>
</div>
<div class="login-right">
   <div class="clearfix"></div>
   <input type="text" placeholder="Confirm email *"/>
   <div class="clearfix"></div>
   <input type="text" placeholder="Confirm password *"/>
   <span class="p-viewer2">
   <i class="fa fa-eye" aria-hidden="true">                     </i>
   </span>
   <div class="clearfix"></div>
   <br>
</div>

3个回答
3

CSS：

.login-form {
 width: 100%;
 margin: 20px 0 0 0;
}

.login-left {
 width: 50%;
 float: left;
}

.login-right {
 width: 50%;
 float: right;
}

.login-form input[type=text] {
 background: #fff;
 border: none;
 border-radius: 8px;
 position: relative;
 font-size: 15px !important;
 display: inline-block;
 outline: none;
 width: 100%;
 height: 30px !important;
 padding: 18px 0 18px 0px;
 margin-bottom: 15px !important;
 color: #666 !important;
 border: 1px solid grey;
}
.pwd{
 position: relative;
}
.p-viewer {
 z-index: 9999;
 position: absolute;
 top: 30%;
 right: 10px;
}

.fa-eye {
 color: #000;
}


@media screen and (max-width:767px) {
 .login-width {
  width: 95% !important;
 }
 .login-left {
  width: 90%;
  margin: 0 auto;
  display: block;
  float: none;
 }
 .login-right {
  width: 90%;
  margin: 0 auto;
  display: block;
  float: none;
 }
}
<!DOCTYPE html>
<html>
<head>
 <title>demo</title>
 <link rel="stylesheet" type="text/css" href="demo.css">
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
 <div class="login-form">
  <div class="login-left">
   <div class="clearfix"></div>
   <input type="text" placeholder="Email *"/>
   <div class="clearfix"></div>
   <div class="pwd">
    <input type="text" placeholder="Password *"/>
    <span class="p-viewer">
     <i class="fa fa-eye" aria-hidden="true"></i>
    </span>
   </div>
   <div class="clearfix"></div>
  </div>
  <div class="login-right">
   <div class="clearfix"></div>
   <input type="text" placeholder="Confirm email *"/>
   <div class="clearfix"></div>
   <div class="pwd">
    <input type="text" placeholder="Password *"/>
    <span class="p-viewer">
     <i class="fa fa-eye" aria-hidden="true"></i>
    </span>
   </div>
   <div class="clearfix"></div>
  </div>
 </div>
</body>
</html>

in your code page responsive problem is here:

.login-form input[type=text] {  
padding: 18px 0 18px 20px;}

因为首先你给出了100%的宽度+填充，所以问题就产生了。

而你的眼睛问题可以通过以下代码得到解决：

<div class="pwd">
    <input type="text" placeholder="Password *"/>
    <span class="p-viewer">
        <i class="fa fa-eye" aria-hidden="true"></i>
    </span>
</div>

只需添加带有 position:responsive 属性的 div 标签，然后在其中添加 class=p-viewer 并将其 position 设置为 absolute，这样便不会出现位置问题...

此代码完全响应式，并且更改简单

2

使用position:relative代替position:absolute，并修改的margin-top

最初的回答：使用相对定位代替绝对定位，并调整元素的margin-top属性。 

.login-form{margin:20px 0 0 0;}
.login-form input[type=text]{
  background: #fff;
  border: none;
  border-radius:8px;
  position: relative;
  font-size:15px !important;
  display: inline-block;
  outline: none;
  width: 100%;
  height: 30px !important;
  padding: 18px 0 18px 20px;
  margin-bottom:15px !important;
  color: #666 !important;
  border: 1px solid grey;
}

.login-left{width:44%; margin: 0 0 0 5%; display:inline-block; float:left;}
.login-right{width:44%; margin: 0 5% 0 0; display:inline-block; float:right;}

@media screen and (max-width:767px) {
.login-width{width:95% !important;}
.login-left{width:90%; margin: 0 auto; display:block; float:none;}
.login-right{width:90%; margin: 0 auto; display:block; float:none;}
}

.p-viewer, .p-viewer2{
  float: right;
  margin-top: -55px;
  position: relative;
  z-index: 1;
  cursor:pointer;
}

.fa-eye {
  color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 <div class="login-form">
              <div class="login-left">
                <div class="clearfix"></div>
                <input type="text" placeholder="Email *"/>
                <div class="clearfix"></div>
                <input type="text" placeholder="Password *"/>
                <span class="p-viewer">
                  <i class="fa fa-eye" aria-hidden="true"></i>
                </span>
                <div class="clearfix"></div>
              </div>
              <div class="login-right">
                <div class="clearfix"></div>
                <input type="text" placeholder="Confirm email *"/>
                <div class="clearfix"></div>
                <input type="text" placeholder="Confirm password *"/>
                 <span class="p-viewer2">
                  <i class="fa fa-eye" aria-hidden="true">                     </i>
                </span>
                <div class="clearfix"></div>
                <br>

            </div>

1
使用这段代码： 

.login-form{margin:20px 0 0 0;}
.login-form input[type=text]{
  background: #fff;
  border: none;
  border-radius:8px;
  position: relative;
  font-size:15px !important;
  display: inline-block;
  outline: none;
  width: 100%;
  height: 30px !important;
  padding: 18px 0 18px 20px;
  margin-bottom:15px !important;
  color: #666 !important;
  border: 1px solid grey;
}

.login-left{width:44%; margin: 0 0 0 5%; display:inline-block; float:left;}
.login-right{width:44%; margin: 0 5% 0 0; display:inline-block; float:right;}

@media screen and (max-width:767px) {
.login-width{width:95% !important;}
.login-left{width:90%; margin: 0 auto; display:block; float:none;}
.login-right{width:90%; margin: 0 auto; display:block; float:none;}
}

.p-viewer {
    position: relative;
    margin: -50px 10px;
    float: right;
}

.fa-eye {
  color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 <div class="login-form">
              <div class="login-left">
                <div class="clearfix"></div>
                <input type="text" placeholder="Email *"/>
                <div class="clearfix"></div>
                <input type="text" id='icon' placeholder="Password *"/>
                <span for='icon' class="p-viewer">
                  <i class="fa fa-eye" aria-hidden="true"></i>
                </span>
                <div class="clearfix"></div>
              </div>
              <div class="login-right">
                <div class="clearfix"></div>
                <input type="text" placeholder="Confirm email *"/>
                <div class="clearfix"></div>
                <input id='icon2' type="text" placeholder="Confirm password *"/>
                 <span for='icon2' class="p-viewer">
                  <i class="fa fa-eye" aria-hidden="true">                     </i>
                </span>
                <div class="clearfix"></div>
                <br>

            </div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接