使用 CSS 输入标签 — 教程
使用 CSS 输入标签 — 教程
HTML
对于 HTML，我们需要一个带有标签和输入的容器。
我们还将为输入设置占位符（“”），这将允许我们使用 CSS 检测输入何时具有某些值。
<div class="input_container">
<input type="text" name="name" placeholder=" ">
<label for="name">姓名</label>
</div>
CSS
对于 CSS，我们将容器的位置设置为相对并更改字体。
.input_container {
位置：相对；
字体系列：BlinkMacSystemFont；
}
现在我们将标签的位置设置为绝对位置并将其与顶部 50% 对齐并转换 translateX(-50%)。
并将 z-index 设置为 -1，以便输入位于标签之上。
否则当鼠标在标签上时我们将无法点击输入。
然后我们将背景颜色设置为白色 (#fff)。实际上，在这里您只需设置与背景相同的颜色，因为该元素将位于输入的顶部边框之上，我们不希望边框在后面。
最后，我将文本颜色设置为浅灰色并添加一些边距和填充。
.input_container 标签 {
位置：绝对；
边距：0 5px；
左：0；
最高：50%；
变换：translateY（-50%）；
z 指数：-1；
背景颜色：#fff；
填充：0 2px；
颜色：#aaa；
}
对于输入，我将边框颜色设置为与标签文本颜色相同的浅灰色。
我还将添加一些边框半径、填充并将背景颜色设置为透明，以便后面的标签可见。
.input_container 输入{
边框：1px 实心#aaa；
边框半径：5px；
背景颜色：透明；
填充：5px；
}
然后我将删除焦点上的轮廓。
.input_container 输入：焦点 {
大纲：无；
}
现在，当输入成为焦点或具有某些价值时，我正在为标签设置样式。
使用“input:not(:placeholder-shown)”，当有某个值（未显示占位符时）且处于焦点时，我将选择输入，并通过使用同级“+”选择器，我将选择标签，并通过将 z-index 设置为 1 并将 top 设置为 0 将其移动到输入的顶部边框的顶部。
我会减小字体大小。
/* 焦点或包含值（占位符未显示） */ .input_container input:focus + label,
.input_container 输入：not(:placeholder-shown) + label {
顶部：0；
字体大小：8px；
z-index：1；
}
当输入成为焦点时，我将覆盖标签的颜色和输入的浅灰色边框并将其设置为绿色。
/* 仅当聚焦时 */
.input_container 输入：焦点 + 标签 {
颜色：RGB（15、156、116）；
}
.input_container 输入：焦点 {
边框颜色：rgb(15, 156, 116);
}
就是这样。
你可以找到代码和视频教程 这里 .
感谢您的阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
