用戶輸入無效的電子郵件格式標籤轉換錯誤

Question

當用戶輸入無效的電子郵件格式時，帶有佔位符和無效電子郵件地址的標籤樣式得到組合。

• 這裏是Jsfiddle

代碼

<form id="myform"> 
    <div class="group">  
    <input type="text" name ="user" required> 
    <span class="highlight"></span> 
    <span class="bar"></span> 
    <label>Name</label> 
    </div> 
    <div class="group">  
    <input type="email"required > 
    <span class="highlight"></span> 
    <span class="bar"></span> 
    <label>Email</label> 
    </div> 
</form> 

Answer 1

嘗試下面的代碼，希望它工作的

body{ 
 
    padding-top:20px; 
 
} 
 
.fieldOuter { 
 
    position: relative; 
 
    margin: 0 0 30px 0; 
 
    font-size: 16px 
 
} 
 
.fieldOuter input { 
 
    padding: 10px; 
 
    width: 250px; 
 
    transition: all 1s; 
 
    border: 2px solid #000; 
 
    font-size: 17px; 
 
    color: #666 
 
} 
 
.fieldOuter label { 
 
    position: absolute; 
 
    left:0px; 
 
    top: 0; 
 
    line-height:15px; 
 
    transition: all 0.5s; 
 
    overflow: hidden; 
 
    color: #000; 
 
    white-space: nowrap; 
 
    z-index: 1; 
 
    opacity: 0; 
 
} 
 
.fieldOuter input:focus + label { 
 
    opacity: 1; 
 
    top: -18px; 
 
} 
 
.fieldOuter input:focus { 
 
    outline: none; 
 
    border-color: rgba(82, 168, 236, 0.8); 
 
}

<div class="fieldOuter"> 
 
<input id="Name" placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'" type="text" /> 
 
    <label for="Name">Name</label> 
 
</div> 
 
<div class="fieldOuter"> 
 
<input id="LastName" placeholder="Last Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'"type="text" /> 
 
    <label for="LastName">Last Name</label> 
 
</div>

Answer 2

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

將此添加到CSS代碼。電子郵件標籤將保留紅色，直到它不包含適當的格式