如何在input输入框的边框上添加自定义文字？

直接通过父容器嵌套+标签定位即可实现，无需JS，兼容性好，以下是可直接运行的代码：

HTML结构 #

<div class="input-group">
  <span class="input-tag">*Email</span>
  <input type="email" name="email" />
</div>

CSS样式 #

/* 外层容器模拟输入框边框 */
.input-group {
  position: relative;
  margin: 16px 0;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
/* 文字标签定位到边框位置 */
.input-tag {
  position: absolute;
  top: -7px;
  left: 12px;
  padding: 0 4px;
  background-color: #ffffff;
  font-size: 12px;
  color: #f56c6c;
}
/* 清除输入框默认边框 */
.input-group input {
  width: 100%;
  height: 38px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  box-sizing: border-box;
}
/* 可选：聚焦状态样式 */
.input-group:focus-within {
  border-color: #409eff;
}
.input-group:focus-within .input-tag {
  color: #409eff;
}

注意事项 #

• 标签的背景色需要和输入框所在的页面背景色保持一致，才能完全遮盖住下方的容器边框
• 可根据设计需求自行调整标签的颜色、字体大小、左右偏移量
• 不需要额外引入第三方依赖，所有主流浏览器均兼容该写法

内容的提问来源于stack exchange，提问作者xxanit