输入字段在焦点上改变它的位置

Question

我正在尝试使用材质设计创建表单。虽然没有聚焦它看起来不错，但是当场地聚焦时，它的位置朝向左侧。 您可以查看图像以获取更多详细信息，还可以查看两个字段之间的距离。

这是HTML：

＆＃13;

＆＃13;

  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; 
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

修改您的css代码：

label {
  position: absolute;
  left: 0;
}

并将ID：id="password"添加到label。

并添加此css代码：

#password{
  left: 182px !important;
}

JSFiddle

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

您的问题是由于标签在焦点上调整大小。正如标签上的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*/
}