CSS特效丨自定义文本框，浮动标签动画（第一版）！
```
<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>
```
### **解释**
1. **`.floating-label`**: 这个类将用于包裹文本框和标签，使它们可以进行定位和样式调整。
2. **`input`**: 设置输入框的基本样式，包括字体、边框和圆角。
3. **`label`**: 初始状态下，标签位于文本框内，并在焦点获取或有内容时上移。
4. **`input:focus`**: 当文本框获得焦点时，边框颜色和阴影效果将变化。
5. **`input:focus + label`**: 当文本框获得焦点或者有内容时，标签将上移并改变样式，以便显示为浮动的分组框标签。
### **效果**
这样设置后，文本框将具有如下效果：
* 默认情况下，标签会在文本框内。
* 当文本框获得焦点或者有输入内容时，标签会上移并以较小字体显示，创建出类似于分组框的效果。
页:
[1]