css选择表单控件(如果不为空
css选择表单控件(如果不为空
提问于 2018-07-08 03:34:40
我使用的是angularjs表单，下面的示例适用于我的代码：
.my-5 {
margin:100px;
}
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
.form-control-placeholder {
position: absolute;
top: 0;
padding: 7px 0 0 13px;
transition: all 200ms;
opacity: 0.5;
}
.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container my-5">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="form-group">
<input type="email" id="email" class="form-control" required>
<label class="form-control-placeholder" for="email">email</label>
</div>
</div>
</div>
</div>
问题是，当给定无效输入时，占位符返回到初始状态，并定位在无效输入上。所以我们的想法是在输入无效的情况下也应用浮动占位符。在电子邮件输入无效的情况下，如何维护浮动占位符？
如果我将：.form-control:invalid + .form-control-placeholder添加到当前的浮动css，当没有给定输入时，它将始终是浮动的。所以这个想法是，当它是空的时候，不要浮动。
回答 1
Stack Overflow用户
发布于 2018-07-08 04:01:50
这是你想要的吗？
.group {
position:relative;
margin: 40px;
}
.group input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
.group input:focus { outline:none;}
.group input ~ label {
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.group input:focus ~ label, .group input:valid ~ label {
top:-20px;
font-size:14px;
color: #009688;
}<div class="group">
<input type="text" required>
<label>Username</label>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51226391
复制相关文章
相似问题