html - 占位符在输入焦点上重叠
问题描述
在文本已经在其位置之后,我的输入与其占位符中的文本重叠。
此表单的我的 HTML:
<form action="./includes/login.inc.php" method="post">
<div class="group">
<input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<div class="btn-box">
<button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
</div>
</form>
这是我的样式表,仅用于此表单,仅此而已:
form {
width: 320px;
margin: 45px auto;
}
form h1 {
font-size: 3em;
font-weight: 300;
text-align: center;
color: #2196F3;
}
form h5 {
text-align: center;
text-transform: uppercase;
color: #c6c6c6;
}
form hr.sep {
background: #2196F3;
box-shadow: none;
border: none;
height: 2px;
width: 25%;
margin: 0px auto 45px auto;
}
form .emoji {
font-size: 1.2em;
}
.group {
position: relative;
margin: 45px 0;
}
textarea {
resize: none;
}
input,
textarea {
background: none;
color: #4F4F4F;
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 320px;
border: none;
border-radius: 0;
border-bottom: 1px solid #4F4F4F;
}
input:focus,
textarea:focus {
outline: none;
}
input:focus ~ label,
textarea:focus ~ label {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 335px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
label {
color: #4F4F4F;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
}
.bar {
position: relative;
display: block;
width: 320px;
}
.bar:before {
content: '';
height: 2px;
width: 0;
bottom: 0px;
position: absolute;
background: #FF3B3F;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
left: 0%;
}
.btn {
background: #fff;
color: #959595;
border: none;
padding: 10px 20px;
border-radius: 3px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
outline: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
color: #752021;
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
background: #FF3B3F;
color: #d3eafd;
}
.btn.btn-link:hover {
background: #0d8aee;
color: #deeffd;
}
.btn.btn-submit {
background: #FF3B3F;
color: white;
}
.btn.btn-submit:hover {
background: #752021;
color: white;
}
.btn.btn-cancel {
background: #eee;
}
.btn.btn-cancel:hover {
background: #e1e1e1;
color: #8b8b8b;
}
.btn-box {
text-align: center;
margin: 50px 0;
}
需要明确的是,当您从框中取消选择时,我希望它看起来像底部的“密码”字段。当您取消选择时,文本位于输入顶部时会向下移动到底部并与其重叠。
谢谢你的帮助。
解决方案
您可以使用 jQuery.focus()
和 . blur()
功能。首先,使用标签的重点样式创建一个类。在输入焦点上检查它是否有一些价值。如果它的focused
类仍然存在,否则将其删除。检查下面的代码:
css
label.focused {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}
jQuery
$('input').focus(function() {
$(this).siblings('label').addClass('focused');
}).blur(function () {
if($(this).val().length == 0) {
$(this).siblings('label').removeClass('focused');
}
});
完整代码
$('input').focus(function() {
$(this).siblings('label').addClass('focused');
}).blur(function () {
if($(this).val().length == 0) {
$(this).siblings('label').removeClass('focused');
}
});
form {
width: 320px;
margin: 45px auto;
}
form h1 {
font-size: 3em;
font-weight: 300;
text-align: center;
color: #2196F3;
}
form h5 {
text-align: center;
text-transform: uppercase;
color: #c6c6c6;
}
form hr.sep {
background: #2196F3;
box-shadow: none;
border: none;
height: 2px;
width: 25%;
margin: 0px auto 45px auto;
}
form .emoji {
font-size: 1.2em;
}
.group {
position: relative;
margin: 45px 0;
}
textarea {
resize: none;
}
input,
textarea {
background: none;
color: #4F4F4F;
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 320px;
border: none;
border-radius: 0;
border-bottom: 1px solid #4F4F4F;
}
input:focus,
textarea:focus {
outline: none;
}
/*input:focus ~ label,
textarea:focus ~ label {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}*/
label.focused {
top: -14px;
font-size: 12px;
color: #FF3B3F;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
width: 335px;
}
input[type="password"] {
letter-spacing: 0.3em;
}
label {
color: #4F4F4F;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
}
.bar {
position: relative;
display: block;
width: 320px;
}
.bar:before {
content: '';
height: 2px;
width: 0;
bottom: 0px;
position: absolute;
background: #FF3B3F;
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
left: 0%;
}
.btn {
background: #fff;
color: #959595;
border: none;
padding: 10px 20px;
border-radius: 3px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
outline: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
color: #752021;
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
background: #FF3B3F;
color: #d3eafd;
}
.btn.btn-link:hover {
background: #0d8aee;
color: #deeffd;
}
.btn.btn-submit {
background: #FF3B3F;
color: white;
}
.btn.btn-submit:hover {
background: #752021;
color: white;
}
.btn.btn-cancel {
background: #eee;
}
.btn.btn-cancel:hover {
background: #e1e1e1;
color: #8b8b8b;
}
.btn-box {
text-align: center;
margin: 50px 0;
}
<form action="./includes/login.inc.php" method="post">
<div class="group">
<input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<div class="btn-box">
<button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
推荐阅读
- python - 添加边缘权重以从邻接矩阵中绘制 networkx 中的输出
- c# - Intellisense 不适用于某些脚本
- python - 计算列内的值重复次数并将计算移至矩阵PANDAS
- django - Django 中的 post_save 信号是原子的吗?
- python - 按钮在 pyqt5 的第二个窗口上不起作用
- react-native - 为什么在 TouchableHighlight 中使用 View 时不能有背景色?
- matlab - 如果条件 Matlab 将不会通过第二个
- ios - 如何防止按钮在文本更改时移动?
- android - 使用 joda time 时在 ci 上测试失败
- javascript - ReactJS:“this.props.addDog(this.state.newDog);”是什么意思?在这段代码中是什么意思?