如何使用 CSS 和 JavaScript 创建 Google 的 Material Design 文本输入字段？

2025-06-10

如何使用 CSS 和 JavaScript 创建 Google 的 Material Design 文本输入字段？

在本教程中，我们尝试借助 CSS 和 JavaScript 从头开始​​重新创建 Google 的文本输入字段动画和设计。

HTML

我们不会使用伪元素来创建这种效果，而是借助div元素。

input我们将元素及其相关元素包裹div在一个容器中。为了创建占位符，我们定义了一个单独的div，它将充当占位符，而不是使用:placeholder伪元素。

<div class="input-contain">
  <input type="text" id="fname" name="fname" autocomplete="off" value="" aria-labelledby="placeholder-fname">
  <label class="placeholder-text" for="fname" id="placeholder-fname">
     <div class="text">First Name</div>
  </label>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

首先，让我们定义input元素及其容器的属性。


.input-contain{
    position: relative;
}
input{
    height: 5rem;
    width: 40rem;
    border: 2px solid black;
    border-radius: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

我们将input通过设置占位符文本的位置来将占位符文本放置在元素的顶部absolute，以使其与容器的宽度和高度相匹配input。

.placeholder-text{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 3px solid transparent;
    background-color: transparent;
    display: flex;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

但是有一个问题。由于占位符元素位于输入元素的顶部，因此您无法点击输入元素。为了解决这个问题，只需将占位符元素的值设置为pointer-events即可。none

.placeholder-text{
    pointer-events: none;
}
Enter fullscreen mode Exit fullscreen mode

现在，让我们稍微改变一下占位符文本的样式。

.text{
    font-size: 1.4rem;
    padding: 0 0.5rem;
    background-color: transparent;
    color: black;
}

input, .placeholder-text{
    font-size: 1.4rem;
    padding: 0 1.2rem;
}
Enter fullscreen mode Exit fullscreen mode

接下来，让我们定义当输入元素获得焦点时应该发生什么。
我们将改变border-color焦点事件，而不是保持轮廓不变。

input:focus{
    outline: none;
    border-color: blueviolet;
}
Enter fullscreen mode Exit fullscreen mode

我们希望占位符文本沿 Y 轴平移（向上），并font-size在输入元素获得焦点时稍微减少一点。此外，我们还可以更改占位符文本的颜色。具体方法如下。将文本颜色更改background-color为与周围颜色相似，使其更加美观。

input:focus + .placeholder-text .text{
    background-color: white;
    font-size: 1.1rem;
    color: black;
    transform: translate(0, -170%);
    border-color: blueviolet;
    color: blueviolet;
}
Enter fullscreen mode Exit fullscreen mode

为了实现平滑过渡，transition请向占位符文本添加属性。

.text{
    transform: translate(0);
    transition: transform 0.15s ease-out, font-size 0.15s ease-out, background-color 0.2s ease-out, color 0.15s ease-out;
}
Enter fullscreen mode Exit fullscreen mode

到目前为止一切都很好，但现在出现了一个问题。当你在输入元素中输入文本，然后从输入元素移除焦点时，占位符文本会回到原来的位置，而我们不希望出现这种情况。我们希望当输入框中已有内容时，占位符文本仍然位于输入文本上方。因此，我们将借助 JavaScript 并修改 CSS。

如果你还记得的话，我们已经value为元素定义了属性input。这会很方便。

<input type="text" id="fname" name="fname" autocomplete="off" value="" aria-labelledby="placeholder-fname">
Enter fullscreen mode Exit fullscreen mode

让我们修改一些 CSS。正如前面讨论过的，当值为空字符串时，占位符文本应该回到其原始位置；但当值不是空字符串时，占位符文本应该保持变形状态（位于输入文本上方）。我们可以通过:not在输入元素值上定义一个伪类来实现这一点。具体方法如下。

input:focus + .placeholder-text .text, :not(input[value=""]) + .placeholder-text .text{
    background-color: white;
    font-size: 1.1rem;
    color: black;
    transform: translate(0, -170%);
}

input:focus + .placeholder-text .text{
    border-color: blueviolet;
    color: blueviolet;
}
Enter fullscreen mode Exit fullscreen mode

但是等等。value 属性在 HTML 中保持不变。我们如何才能将其更改为用户输入的字符串呢？这就是 JavaScript 发挥作用的地方。

我们将属性的值设置value为用户输入的字符串，就像这样，

let input_element = document.querySelector("input");

input_element.addEventListener("keyup", () => {
    input_element.setAttribute("value", input_element.value);
})
Enter fullscreen mode Exit fullscreen mode

就这样。你刚刚创建了一个现代 Material Design 的文本输入字段。

这是最终的输出：

鏂囩珷鏉ユ簮锛�https://dev.to/murtuzaalisurti/how-to-create-google-s-material-design-text-input-field-animation-38n
Devto 翻译
PREV
教你的孩子用 Python 构建自己的游戏 - 1
NEXT
JavaScript .map() 方法 📍 Map 方法