html - 通过示例使用 bootstrap 制作响应式登录表单。添加文本后如何使表单标签过渡保持不变？

Question

我正在尝试使用 bootstrap 构建一个漂亮的响应式登录表单，但我遇到了一个有趣的问题。

我想让标签在文本位于其中时远离表单输入，我可以做到这一点!但问题是，当我单击登录表单外部时，标签会返回到中间。 如何强制转换持续存在，以便当文本位于表单内时标签不会受到干扰？

这是一个很好的 gif 图像，可以轻松可视化问题

这是 fiddle 链接:https://jsfiddle.net/d10ayfw5/

body {
  margin: auto;
  padding-top: 30px;
  max-width: 300px;
}

div {
  margin: 20px 0 20px 0;
}

.form-outline {
  position: relative;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  transition: all .2s linear;
}

.form-control:active~.form-label {
  transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
  background-color: rgb(255, 255, 255);
}

.form-control:focus~.form-label {
  transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
  background-color: rgb(255, 255, 255);
}

.form-control~.form-label {
  position: absolute;
  top: 0;
  left: .75rem;
  padding-top: .5rem;
  pointer-events: none;
  transition: all .2s ease-out;
  color: rgba(0, 0, 0, .6);
  margin-bottom: auto;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<div class="container d-flex align-items-center">
  <div class="row">
    <div class="col-md-2">
      <form>
        <div class="form-outline mb-4">
          <input type="email" id="form1Example1" class="form-control" />
          <label class="form-label" for="form1Example1">
                Email address
              </label>
        </div>

        <div class="form-outline mb-4">
          <input type="password" id="form1Example2" class="form-control" />
          <label class="form-label" for="form1Example2">Password</label>
        </div>

        <button type="submit" class="btn btn-primary btn-block">
              Sign in
        </button>
      </form>
    </div>
  </div>
</div>

Answer 1

首先，您需要向输入元素添加空的 placeholder=' '。

因此，您可以使用 :placeholder-shown 伪选择器，无论它们是否有值。 另外，从选择器规范:Selectors spec

input:not(:placeholder-shown) ~ .form-label {
   transform: translateY(-1.5rem) translateY(.1rem) scale(.8);
   background-color: rgb(255, 255, 255);
}

此解决方案仅支持 CSS，并且与专业浏览器兼容。 can-i-use:placeholder-shown