Adding fa eye icon inside input field at the right side which is responsive

user_11384062 0
Viewed 17894

I am trying to add an eye icon at the right side. In my origin code it shows at the right side but is not responsive and moves when the screen size is changed.

Below is a loose implementation. I want that it should show at the right side right before when the input field ends in both password fields. Currently it shows but not properly. Test it in full screen.

.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>

css html
3 Answers

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;}

because first you give 100% width + padding so problem is generateed.

and your eyes problem is solved to these code:

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

simply add div tag with position:responsive and next class = p-viewer in add position:absolute so position problem is not generated...

this code is fully responsive and simple changes

user_112498280

use position:relative instead of position:absolute for span and margin-top is modified

.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>

user_61088820

use this code :

.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>

user_116901900
Related