-
这是我的意见
.centered-name
{
width: 80%;
margin: auto;
}
.group {
width: 100%;
overflow: hidden;
position: relative;
}
.label {
position: absolute;
top: 40px;
color: #666666;
font: 400 26px Roboto;
cursor: text;
transition: 0.3s ease;
width: 100%;
text-align: center;
}
.input {
display: block;
width: 100%;
padding-top: 36px;
border: none;
border-radius: 0;
font-size: 30px;
transition: .3s ease;
text-align: center;
}
.input:valid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.input:focus {
outline: none;
}
.input:focus ~ .label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
transform: translateX(0);
}
.bar {
border-bottom: 2px solid #ff5126;
width: 100%;
margin-top: 6px;
transition: .3s ease;
}
.input:valid ~ .bar
{
border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
<div class="group">
<input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
<label class="label res" for="name">Name</label>
<div class="bar"></div>
</div>
</div>
当被侵害并且您写了一些东西(少于5个字母)并且它失去焦点时,标签就会掉下来
我也尝试
.input:invalid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.centered-name
{
width: 80%;
margin: auto;
}
.group {
width: 100%;
overflow: hidden;
position: relative;
}
.label {
position: absolute;
top: 40px;
color: #666666;
font: 400 26px Roboto;
cursor: text;
transition: 0.3s ease;
width: 100%;
text-align: center;
}
.input {
display: block;
width: 100%;
padding-top: 36px;
border: none;
border-radius: 0;
font-size: 30px;
transition: .3s ease;
text-align: center;
}
.input:valid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.input:invalid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.input:focus {
outline: none;
}
.input:focus ~ .label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
transform: translateX(0);
}
.bar {
border-bottom: 2px solid #ff5126;
width: 100%;
margin-top: 6px;
transition: .3s ease;
}
.input:valid ~ .bar
{
border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
<div class="group">
<input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
<label class="label res" for="name">Name</label>
<div class="bar"></div>
</div>
</div>
但是在我们写任何东西之前,标签又升起了
写完信后如何使输入无效?
最佳答案
试试这个..添加下面的js
$('#name').keyup( function() {
if( this.value.length < 6 ) {
$('input').blur();
}
});
.centered-name
{
width: 80%;
margin: auto;
}
.group {
width: 100%;
overflow: hidden;
position: relative;
}
.label {
position: absolute;
top: 40px;
color: #666666;
font: 400 26px Roboto;
cursor: text;
transition: 0.3s ease;
width: 100%;
text-align: center;
}
.input {
display: block;
width: 100%;
padding-top: 36px;
border: none;
border-radius: 0;
font-size: 30px;
transition: .3s ease;
text-align: center;
}
.input:valid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.input:focus {
outline: none;
}
.input:focus ~ .label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
transform: translateX(0);
}
.bar {
border-bottom: 2px solid #ff5126;
width: 100%;
margin-top: 6px;
transition: .3s ease;
}
.input:valid ~ .bar
{
border-bottom: 2px solid #3bb873;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-name">
<div class="group">
<input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
<label class="label res" for="name">Name</label>
<div class="bar"></div>
</div>
</div>