在右侧的输入字段内添加响应式图标

时间：2019-06-24 08:44:22

标签： html css

我正在尝试在右侧添加眼睛图标。在我的原始代码中，它显示在右侧，但是没有响应，并且在更改屏幕尺寸时会移动。

下面是一个宽松的实现。我希望当输入字段在两个密码字段中都结束时，它应该显示在右侧的右边。目前显示，但不正确。全屏测试。

.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 个答案:

答案 0 :(得分：1)

css：

df.to_sql(name='Product', con=db, if_exists='replace', index=False)

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

因为首先您提供100％的宽度+填充，所以会产生问题。

这些代码解决了您的眼睛问题：

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

只需添加带有position：response的div标签，并在下一个class = p-viewer中添加position：absolute，这样就不会产生位置问题...

此代码具有完全的响应能力和简单的更改

答案 1 :(得分：0)

使用position:relative代替position:absolute进行跨度和边距顶部修改

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

答案 2 :(得分：0)

使用此代码：

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

相关问题
最新问题