標籤過渡問題

Question

我在HTML，CSS新我收到錯誤，當用戶輸入無效的輸入到輸入框，然後輸入特定域的標籤下降，但是當用戶輸入正確的 輸入，則它的做工精細。

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
    <form id="form"> 
    <div class="group"> 
    <input type="text" required id="name" minlength="4"> 
    <span class="highlight"></span> 
    <span class="bar"></span> 
    <label class="labeling">Name</label> 
    </div> 
    <div class="group"> 
    <input type="email" required id="email"> 
    <span class="highlight"></span> 
    <span class="bar"></span> 
    <label class="labeling">Email</label> 
    </div> 
    </form> 

我已經試過this

<form id="form"> 
<div class="group">  
<input type="text" required id="name" minlength="4"> 
<span class="highlight"></span> 
<span class="bar"></span> 
<label class="labeling">Name</label> 
</div> 
<div class="group">  
<input type="email" required id="email"> 
<span class="highlight"></span> 
<span class="bar"></span> 
<label class="labeling">Email</label> 
</div> 
</form> 
.group { 
margin-top: 40px; 
position: relative; 
margin-bottom: 45px; 
} 
input { 
font-size: 22px; 
padding: 10px 10px 10px 5px; 
display: block; 
width: 300px; 
border: none; 
border-bottom: 1px solid #ccc; 
} 
input:focus { 
outline: none; 
} 
label.labeling { 
color: #999; 
font-size: 18px; 
font-weight: normal; 
position: absolute; 
pointer-events: none; 
left: 5px; 
top: 10px; 
transition: 0.2s ease all; 
} 
input:focus ~ label.labeling, 
input:valid ~ label.labeling { 
top: -20px; 
font-size: 14px; 
color: #5264AE; 
} 
.bar { 
position: relative; 
display: block; 
width: 309px; 
} 
.bar:before, 
.bar:after { 
content: ''; 
height: 1px; 
width: 0; 
bottom: 1px; 
position: absolute; 
transition: 0.2s ease all; 
} 
.bar:before { 
left: 50%; 
} 
.bar:after { 
right: 50%; 
} 
input:focus ~ .bar:before, 
input:focus ~ .bar:after { 
width: 50%; 
} 
.highlight { 
position: absolute; 
height: 60%; 
width: 100px; 
top: 25%; 
left: 0; 
pointer-events: none; 
opacity: 0.5; 
} 
input:-webkit-autofill { 
-webkit-box-shadow: 0 0 0px 1000px white inset; 
} 
$(document).ready(function() { 
$("#form").validate({ 
rules: { 
name: { 
required: true 
}, 
email: { 
required: true 
} 
}, 
messages: { 
minlength: "your name at least 4 characters long", 
email: "Please enter a valid email address" 
} 
}); 
}); 

Answer 1

您必須使用一些JS太這裏有一個輸入框沒有:empty CSS屬性。（使用:invalid將意味着你的佔位符的設置會不行！）

看看這個fiddle，讓我知道您的反饋意見。謝謝！

使用這個CSS：

input.invalid-input ~ label.labeling { 
    top: -20px; 
    font-size: 14px; 
    color: red; 
} 

，並添加部分JS太：

$("input").each(function() { 
    var $this = $(this); 
    $this.on("change", function() { 
     if ($(this).is(':invalid') && $(this).val() != "") { 
     $(this).addClass("invalid-input"); 
     } else { 
     $(this).removeClass("invalid-input"); 
     } 
    }); 
    });