輸入字段改變它的位置，而焦點

Question

我想創建一個材料設計的形式。雖然沒有集中注意力，但看起來不錯，但是當這個領域集中時，它是向左的位置。 您可以查看圖像以瞭解更多詳細信息，還可以查看兩個字段之間的距離。

這裏是HTML：

form.login-form { 
 
    display:block; 
 
    position:relative; 
 
    margin: 40px auto; 
 
    } 
 
    label{ 
 
    display: inline-block; 
 
    position: relative; 
 
    top:0px; 
 
    left:-184px; 
 
    color:#999; 
 
    font-family:'Helvetica', sans-serif; 
 
    font-size:16px; 
 
    z-index:1; 
 
    transition: all 0.2s ease-in; 
 
    } 
 
    input{ 
 
    display:inline-block; 
 
    position: relative; 
 
    background:none; 
 
    border:none; 
 
    border-bottom: 1px solid #aaa; 
 
    font-family: 'Helvetica', sans-serif; 
 
    font-weight: lighter; 
 
    font-size: 16px; 
 
    z-index:2; 
 
    } 
 
    input:focus , input:valid{ 
 
    outline:none; 
 
    border-bottom: 1px solid #830303; 
 
    position: relative; 
 
    } 
 
    input:focus + label,input:valid + label{ 
 
    top:-17px; 
 
    font-size:11px; 
 
    color:#830303; 
 
    background-position: 0 0; 
 
    }

<form action="#" method="" class="login-form"> 
 
    <div class="loginformgrid"> 
 
     <div> 
 
     <input type="text" name="username" required autocomplete="off"> 
 
     <label for="username">Username</label> 
 
     <input type="password" name="password" required autocomplete="off" > 
 
     <label for="password">Password</label> 
 
     <button class="login-button" type="submit" value="submit">Login</button> 
 
     </div> 
 
     <div class="belowloginformgrid"> 
 
     <div> 
 
      <input type="checkbox" name="remeberme"> Remember me 
 
      <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Forgot password?</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form>

Answer 1

您遇到的問題是由於標籤大小調整的重點。由於標籤上有transition:all，它將其應用於所有屬性，並且字體大小越來越小，因此標籤佔用的空間更少，因此控件的默認內聯間距縮小。將標籤的寬度設置爲默認大小以修復它，以使其不會隨着轉換而更改，並且保持不變則不縮小介於兩者之間的空間。

label{ 
    display: inline-block; 
    position: relative; 
    top:0px; 
    left:-184px; 
    color:#999; 
    font-family:'Helvetica', sans-serif; 
    font-size:16px; 
    z-index:1; 
    transition: all 0.2s ease-in; 
    width:100px; /* Add this to keep it same when transitioning*/ 
} 

Answer 2

我已經重新安排了標籤和輸入，並增加了一個額外的span標記。

form.login-form { 
 
    display: block; 
 
    position: relative; 
 
    margin: 40px auto; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    position: relative; 
 

 
} 
 
label span { 
 
    color: #999; 
 
    display: block; 
 
    position: absolute; 
 
    font-family: 'Helvetica', sans-serif; 
 
    font-size: 16px; 
 
    z-index: 1; 
 
    margin-top: -1.5em; 
 
    transition: all 0.2s ease-in;} 
 

 
input { 
 
    display: inline-block; 
 
    position: relative; 
 
    background: none; 
 
    border: none; 
 
    border-bottom: 1px solid #aaa; 
 
    font-family: 'Helvetica', sans-serif; 
 
    font-weight: lighter; 
 
    font-size: 16px; 
 
    z-index: 2; 
 
} 
 

 
input:focus, 
 
input:valid { 
 
    outline: none; 
 
    border-bottom: 1px solid #830303; 
 
} 
 

 
input:focus+span, 
 
input:valid+span { 
 
    margin-top: -3.5em; 
 
    font-size: 11px; 
 
    color: #830303; 
 
    background-position: 0 0; 
 
}

<form action="#" method="" class="login-form"> 
 
    <div class="loginformgrid"> 
 
    <div> 
 
     <label for="username"> 
 
     <input type="text" name="username" required autocomplete="off"> 
 
     <span>Username</span> 
 
     </label> 
 
     <label for="password"> 
 
     <input type="password" name="password" required autocomplete="off"> 
 
     <span>Password</span> 
 
     </label> 
 
     
 
     <button class="login-button" type="submit" value="submit">Login</button> 
 
    </div> 
 
    <div class="belowloginformgrid"> 
 
     <div> 
 
     <input type="checkbox" name="remeberme"> Remember me 
 
     <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Forgot password?</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

Answer 3

編輯您的css代碼：

label { 
    position: absolute; 
    left: 0; 
} 

，並添加ID：id="password"到label。

並添加此css代碼：

#password{ 
    left: 182px !important; 
} 

JSFiddle