Menu
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>
745
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>.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
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
