CSS特效丨自定义文本框，浮动标签动画（第一版）
https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/dLtTnNkuaUxFvIgSeMBm8nquennxMZcS8Elzblq4yd9twNuzLb2JC2P547FxzaWLm5PcY0sXjUibdicnqGpzCCbA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1<body>
<div class="container mt-5">
<div class="form-group floating-label">
<input type="text" class="form-control" id="textInput" placeholder=" " />
<label for="textInput">请输入名称</label>
</div>
</div>
</body><style>
body{
padding: 200px;
}
.floating-label {
position: relative;
margin-bottom: 1.5rem;
}
.floating-label input {
font-size: 1rem;
border: 1px solid #ced4da;
border-radius: 0.375rem;
padding: 0.75rem 0.75rem;
background-color: #fff;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.floating-label label {
position: absolute;
top: 50%;
left: 0.75rem;
font-size: 1rem;
color: #6c757d;
pointer-events: none;
transition: all 0.2s ease;
transform: translateY(-50%);
background-color: #fff;
padding: 0 0.25rem;
z-index: 1;
}
.floating-label input:focus {
border-color: #495057;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.floating-label input:focus+label,
.floating-label input:not(:placeholder-shown)+label {
top: -0.75rem;
left: 0.75rem;
font-size: 0.75rem;
color: #495057;
background-color: #fff;
padding: 0 0.25rem;
transform: translateY(0);
}
.floating-label input:not(:placeholder-shown) {
border-color: #495057;
}
</style>解释
[*].floating-label: 这个类将用于包裹文本框和标签，使它们可以进行定位和样式调整。
[*]input: 设置输入框的基本样式，包括字体、边框和圆角。
[*]label: 初始状态下，标签位于文本框内，并在焦点获取或有内容时上移。
[*]input:focus: 当文本框获得焦点时，边框颜色和阴影效果将变化。
[*]input:focus + label: 当文本框获得焦点或者有内容时，标签将上移并改变样式，以便显示为浮动的分组框标签。
效果这样设置后，文本框将具有如下效果：
[*]默认情况下，标签会在文本框内。
[*]当文本框获得焦点或者有输入内容时，标签会上移并以较小字体显示，创建出类似于分组框的效果。
页:
[1]