如何使用 css 和 bootstrap 创建材料设计输入表单？

Question

我想使用 css 和 bootstrap 设计以下材料设计输入表单。以下代码是我目前正在使用的。但它没有提供我想要的确切结果。

代码笔链接：在此处查看源代码

HTML代码：

<div class="container">

  <h2>Google Material Design in CSS3<small>Inputs</small></h2>

  <form>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>

  </form>

  <p class="footer">
    a <a href="https://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="https://scotch.io" target="_blank">scotch.io</a>
  </p>

</div>

但我想要这样的设计：

Answer 1

仅 CSS 解决方案；使用~标签上的兄弟选择器和:valid输入上的伪选择器的组合。

body {
  margin: 10px;
}

.form-group>label {
  bottom: 34px;
  left: 15px;
  position: relative;
  background-color: white;
  padding: 0px 5px 0px 5px;
  font-size: 1.1em;
  transition: 0.2s;
  pointer-events: none;
}

.form-control:focus~label {
  bottom: 55px;
}

.form-control:valid~label {
  bottom: 55px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <br>

      <div class="form-group">
        <input type="text" class="form-control" id="usr" required>
        <label for="usr">Name</label>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="password" required>
        <label for="usr">Password</label>
      </div>
    </div>
  </div>
</div>

Answer 2

由于您已经标记了 Bootstrap 4，我假设您想要有关该框架的解决方案。

像这样设置默认的表单组、标签和输入标记；

<div class="form-group">
   <label for="usr">Name:</label>
   <input type="text" class="form-control" id="usr">
</div>

然后添加这个css，这会做的是

1. 相对于其容器的位置标签（表单组）
2. 然后我们指定了顶部和左侧的位置，以便它落在输入字段的顶部
3. 我在标签上添加了一个白色背景和填充，以便它在标签周围有一个框。

.form-group > label {
  top: 18px;
  left: 6px;
  position: relative;
  background-color: white;
  padding: 0px 5px 0px 5px;
  font-size: 0.9em;
}

这是引导程序 4 上的代码的小提琴； http://jsfiddle.net/rw29jot4/

对于动画，检查这个小提琴，我们需要利用点击事件并移动标签的位置；

用动画更新代码； http://jsfiddle.net/sedvo037/

编辑：请参阅下面我仅使用 CSS 的答案。