Material Design 是一种由 Google 推出的设计语言，其设计风格简洁、明亮，深受广大用户喜爱。在前端开发中，我们可以使用 Material Design 风格的输入框来增强用户交互体验。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格的输入框。
1. HTML 结构
首先，我们需要创建一个 HTML 结构来包含输入框和标签。如下所示：
<div class="input-field"> <input id="input" type="text" /> <label for="input">Input Label</label> </div>
其中，.input-field 类表示输入框的容器，#input 表示输入框本身，label 标签则是输入框的标签。注意，label 标签的 for 属性需要与输入框的 id 属性相同，这样才能实现点击标签时输入框获得焦点的效果。
2. CSS 样式
接下来，我们需要为输入框添加样式。我们可以使用 CSS 的伪类和伪元素来实现 Material Design 风格的效果。如下所示：
-- -------------------- ---- ------- ------------ - --------- --------- -------------- ------- - ------------ ----- - --------- --------- ---- -- ----- -- ---------- ----- ------ -------- ----------- --- ---- --------- --------------- ----- - ------------ ----- - ------ ----- ------- ----- -------------- --- ----- -------- -------- ----- ---------- ----- -------- ------ -- - ------------ ----------- - -------------- --- ----- -------- - ------------ ----------- - ----- - ---- -------- ---------- ------- ------ -------- -
其中，.input-field 类的 position 属性设置为 relative，以便后续设置 label 和 input 的位置。margin-bottom 属性用于设置输入框容器的下外边距。
.input-field label 类的 position 属性设置为 absolute，以便将标签覆盖在输入框上方。top 和 left 属性设置为 0，使标签与输入框左上角对齐。font-size 属性设置为 1rem，color 属性设置为灰色，transition 属性用于实现动画效果，pointer-events 属性设置为 none，以便标签不会干扰输入框的交互。
.input-field input 类用于设置输入框的样式。width 属性设置为 100%，以便输入框的宽度与容器一致。border 属性设置为 none，以便去除默认的边框样式。border-bottom 属性设置为灰色的实线，用于表示输入框的底部边框。outline 属性设置为 none，以便去除默认的轮廓样式。font-size 属性设置为 1rem，padding 属性用于设置输入框的内边距。
.input-field input:focus 类用于设置输入框获得焦点时的样式。border-bottom 属性设置为蓝色的实线，表示输入框的底部边框变粗。注意，这里的 :focus 伪类需要与 HTML 中的 input 元素相对应。
.input-field input:focus ~ label 类用于设置输入框获得焦点时标签的样式。top 属性设置为 -1.5rem，表示标签向上移动 1.5 个字号的距离。font-size 属性设置为 0.8rem，color 属性设置为蓝色，以便与输入框获得焦点时的样式相一致。注意，这里的 ~ 选择器用于表示 input 元素之后的 label 元素。
3. JavaScript 交互
最后，我们需要为输入框添加交互效果。我们可以使用 JavaScript 来实现标签点击时输入框获得焦点的效果。如下所示：
const input = document.querySelector('#input');
const label = document.querySelector('label[for="input"]');
label.addEventListener('click', () => {
input.focus();
});其中，querySelector 方法用于获取 input 和 label 元素。addEventListener 方法用于为标签添加点击事件，当标签被点击时，调用 focus 方法使输入框获得焦点。
4. 示例代码
完整的示例代码如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ------ ----- -------------
-------
------------ -
--------- ---------
-------------- -------
-
------------ ----- -
--------- ---------
---- --
----- --
---------- -----
------ --------
----------- --- ---- ---------
--------------- -----
-
------------ ----- -
------ -----
------- -----
-------------- --- ----- --------
-------- -----
---------- -----
-------- ------ --
-
------------ ----------- -
-------------- --- ----- --------
-
------------ ----------- - ----- -
---- --------
---------- -------
------ --------
-
--------
-------
------
---- --------------------
------ ---------- ----------- --
------ ----------------- -------------
------
--------
----- ----- - ---------------------------------
----- ----- - ---------------------------------------------
------------------------------- -- -- -
--------------
---
---------
-------
-------5. 总结
通过本文的介绍，我们了解了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 风格的输入框。在实现过程中，我们使用了 CSS 的伪类和伪元素来实现动画效果，使用 JavaScript 来实现标签点击时输入框获得焦点的效果。这些技术不仅可以应用于输入框，还可以应用于其他组件的实现中。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656b0066d2f5e1655d3783f3