CSS实现 Google Material Design 文本输入框风格(推荐)

实现 Google Material Design 文本框风格的方法有很多种，但是本攻略将重点介绍使用 CSS 实现的方法。以下是实现过程：

步骤 1：HTML 结构

首先，我们需要定义一个基本的 HTML 结构，包含一个输入框和一个标签（label），如下所示：

<div class="input-wrapper">
  <input type="text" required />
  <label>输入框</label>
</div>

步骤 2：基础样式

接下来，在样式表中定义基础样式：

.input-wrapper {
  position: relative;
  margin: 2rem;
}
.input-wrapper label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: grey;
  pointer-events: none;
  transition: all 0.2s ease;
}
.input-wrapper input {
  font-size: 1.2rem;
  padding: 1rem;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid grey;
  background-color: transparent;
  width: 100%;
}
.input-wrapper input:focus {
  outline: none;
  border-bottom: 2px solid blue;
}

这段代码中，我们设置了输入框的基本样式，包括：

• input-wrapper 的 position 属性设置为 relative，使得标签和输入框可以在输入框容器内定位。
• label 的 position 属性设置为 absolute、top 和 left 属性设置为 0，使得标签在输入框容器的左上角定位。
• font-size、font-weight 和 color 属性分别设置标签的字体大小、粗细和颜色。
• pointer-events 属性设置为 none，使得标签无法响应鼠标事件。
• transition 属性设置动画过渡效果，让标签可以进行平滑的展示和隐藏。
• input 的 padding 值设置为 1rem，让输入框内的文字与输入框边缘有一定的间距。
• border、border-radius 和 border-bottom 属性设置输入框下边框的颜色、边框的弧度和边框的宽度。
• background-color 属性设置输入框的背景色为透明。
• input:focus 伪类样式设置输入框获取焦点时的样式，包括去掉默认的外边框边线、设置下方边框为蓝色。

步骤 3：为输入框和标签添加动画效果

为了让输入框和标签具有动态效果，我们需要添加一些 CSS3 动画效果，在样式表中添加以下代码：

.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {
  top: -2rem;
  font-size: 0.8rem;
  color: blue;
}

这段代码中，我们使得当输入框处于聚焦状态或者输入框中有内容时，标签会上移并缩小字体大小，从而创建一种动画效果。

示例 1：添加输入框的提示信息

为了让用户知道输入框需要输入什么，我们可以为输入框的 placeholder 属性添加提示信息。在 HTML 中添加以下代码：

<div class="input-wrapper">
  <input type="text" placeholder="用户名" required />
  <label>用户名</label>
</div>

这样，在输入框中没有输入内容时，就会显示 "用户名" 的提示信息。

示例 2：为输入框添加错误提示样式

有时候，用户在输入内容时会出现错误，这时我们需要为输入框添加错误提示样式。在样式表中添加以下代码：

.input-wrapper input:invalid:not(:placeholder-shown) {
  border-bottom-color: red;
}
.input-wrapper input:focus:invalid:not(:placeholder-shown) + label {
  color: red;
}

这段代码中，我们为 input 使用了 :invalid 伪类选择器，当输入无效时，输入框下边框的颜色会变为红色，标签的字体颜色也会变为红色。

尝试了上面的这些步骤之后，你就可以快速实现 Google Material Design 风格的文本输入框啦！