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

Question

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

代码笔链接：View Source Code Here

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

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

设置默认表单组、标签和输入标记，如下所示；

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

然后添加这个css，这样做的效果是

1. position label相对于其容器(form-group)
2. then我们指定了顶部和左侧位置，这样它就会落在输入字段的顶部。
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。

Answer 2

CSS Only解决方案；使用标签上的同级选择器~和输入上的: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 3

尝试使用此代码。

HTML：

  <div class="main_div">
  <div class="group">
      <input type="text" required="required"/>
      <label>Name</label>
    </div>
</div>

CSS：

.main_div{
    padding: 30px;
}
input,
textarea {
    background: none;
    color: #c6c6c6;
    font-size: 18px;
    padding: 10px 10px 10px 15px;
    display: block;
    width: 320px;
    border: none;
    border-radius: 10px;
    border: 1px solid #c6c6c6;
}
input:hover{
    border: 3px solid black;
}
input:focus,
textarea:focus {
    outline: none;
    border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
    top: -5px;
    font-size: 12px;
    color: #000;
    left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
    width: 320px;
}

input[type="password"] {
    letter-spacing: 0.3em;
}
.group{
    position: relative;
}
label {
    color: #c6c6c6;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 12px;
    transition: 300ms ease all;
    background-color: #fff;
    padding: 0 2px;
}