本教程旨在指导开发者如何使用 CSS 技巧，创建一个标签嵌入到边框顶部的自定义下拉选择框。通过修改 HTML 结构和添加 CSS 样式，实现美观且用户体验良好的下拉选择组件，并提供使用 Bootstrap 框架的替代方案。
方法一：使用 CSS 伪元素和定位
这种方法的核心思想是使用 CSS 伪元素 :before 或 :after 创建一个假的标签，并将其定位到下拉框的边框顶部。
HTML 结构：
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.custom-select {
position: relative;
display: inline-block;
width: 200px; /* 根据需要调整宽度 */
}
.custom-select select {
appearance: none; /* 移除默认样式 */
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
border: 1px solid #ccc;
width: 100%;
cursor: pointer;
font-size: 14px;
}
.select-label {
position: absolute;
top: -8px; /* 调整标签位置，使其嵌入边框 */
left: 10px; /* 调整标签左侧位置 */
background-color: white; /* 与背景颜色一致 */
padding: 0 5px; /* 增加标签左右两侧的内边距 */
font-size: 12px;
color: #555;
}代码解释：
- .custom-select：设置相对定位，为标签的绝对定位提供参考。
- select：移除默认样式，并设置基本样式，如边框、内边距等。 appearance: none; 移除浏览器默认的下拉框样式，使其更容易自定义。
- .select-label：使用绝对定位将标签放置在下拉框的顶部边框上。 top: -8px; 将标签向上移动，使其嵌入边框。 background-color: white; 使标签的背景色与下拉框背景色一致，从而遮盖边框。
注意事项：
- background-color 必须与下拉框的背景颜色一致，才能达到嵌入边框的效果。
- top 和 left 的值需要根据实际情况进行调整，以保证标签的精确位置。
- 可以根据需要调整标签的字体大小、颜色等样式。
方法二：使用 Bootstrap 的 Floating Labels
Bootstrap 提供了 form-floating 类，可以轻松实现带有嵌入式标签的表单控件。
引入 Bootstrap CSS 和 JavaScript：
HTML 结构：
代码解释：
- form-floating：应用 Bootstrap 的浮动标签样式。
- form-select：应用 Bootstrap 的下拉选择框样式。
- label：标签内容，与 select 元素的 id 关联。
优点：
- 简单易用，代码量少。
- 样式统一，符合 Bootstrap 的设计规范。
- 自适应性强，兼容各种设备。
缺点：
- 依赖 Bootstrap 框架。
- 自定义程度较低。
总结
本教程介绍了两种实现带有嵌入式标签的下拉选择框的方法。第一种方法使用 CSS 伪元素和定位，灵活性高，可以自定义样式，但代码量相对较多。第二种方法使用 Bootstrap 的 Floating Labels，简单易用，但依赖 Bootstrap 框架。开发者可以根据自己的需求选择合适的方法。 在实际应用中，建议根据项目需求和团队技术栈选择合适的方法。 如果项目已经使用了 Bootstrap，那么使用 Floating Labels 是一个不错的选择。 如果需要高度自定义，或者不想依赖 Bootstrap，那么可以使用 CSS 伪元素和定位。
