如何使用 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>

但我想要这个设计：

原文由 shehan96 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于您已经标记了 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;
}

这是 bootstrap 4 上该代码的小提琴； http://jsfiddle.net/rw29jot4/

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

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

编辑：请看下面我的答案，它只使用 CSS。

原文由 Jerdine Sabio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Jerdine Sabio 发布，翻译遵循 CC BY-SA 4.0 许可协议