时间戳

首页 > 解决方案 > 在右侧的输入字段内添加 fa eye 图标，这是响应式的

html - 在右侧的输入字段内添加 fa eye 图标，这是响应式的

问题描述

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

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

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

标签： htmlcss

解决方案

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

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

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

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

只需在添加位置：响应和下一个类 = p-viewer 中添加带有位置的 div 标签：绝对，因此不会产生位置问题...

此代码是完全响应和简单的更改

推荐阅读