输入字段改变它的位置，而焦点

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