如何在非纯色背景下实现CSS边框内标签效果？

针对你需要在非纯色背景下实现标签嵌入输入框边框、且不能用<fieldset>或固定背景色label的需求，除了position:absolute的方案，还有以下几种可行方法：

方法1：CSS Grid + 输入框内边距组合 #

利用Grid布局让label和input重叠在同一区域，通过给input设置顶部内边距留出标签位置，让label直接覆盖在输入框的边框上方（无需背景色，文字直接显示在页面背景上）。

适配你现有结构的示例代码：

/* 保持行的flex布局，让三个字段平分宽度 */
.edit_apt_form__right--field--row {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}

/* 每个表单字段的容器用Grid布局 */
.edit_apt_form__right .form-group {
  display: grid;
  grid-template: 1fr / 1fr;
  position: relative;
  flex: 1; /* 让字段平分宽度 */
}

.edit_apt_form__right .form-group label {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  grid-area: 1 / 1; /* 和input重叠 */
  margin-left: 0.8rem;
  margin-top: -0.6rem; /* 调整位置嵌入边框 */
  z-index: 1; /* 确保标签在输入框上方 */
}

.edit_apt_form__right .form-group input {
  grid-area: 1 / 1;
  padding: 1rem 0.8rem 0.5rem; /* 顶部内边距预留标签空间 */
  border: 2px solid #你的边框颜色;
  background: transparent; /* 继承页面背景 */
  color: #fff;
  width: 100%;
}

方法2：伪元素模拟带缺口的边框 #

用两个伪元素分别绘制输入框的边框，特意在标签位置留出缺口，让标签可以完美嵌入其中，完全贴合页面背景。

示例代码：

.edit_apt_form__right--field--row {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}

.edit_apt_form__right .form-group {
  position: relative;
  flex: 1;
  padding-top: 1rem; /* 给标签留位置 */
}

.edit_apt_form__right .form-group label {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 0.8rem;
  z-index: 1;
}

/* 绘制左、右、下边框 */
.edit_apt_form__right .form-group::before {
  content: '';
  position: absolute;
  top: 0.6rem; /* 和标签高度对齐 */
  left: 0;
  right: 0;
  bottom: 0;
  border-left: 2px solid #你的边框颜色;
  border-right: 2px solid #你的边框颜色;
  border-bottom: 2px solid #你的边框颜色;
  pointer-events: none; /* 不干扰输入框交互 */
}

/* 绘制标签右侧的上边框 */
.edit_apt_form__right .form-group::after {
  content: '';
  position: absolute;
  top: 0.6rem;
  left: calc(0.8rem + 6rem); /* 根据标签宽度调整，6rem为预估宽度 */
  right: 0;
  border-top: 2px solid #你的边框颜色;
  pointer-events: none;
}

.edit_apt_form__right .form-group input {
  width: 100%;
  padding: 0.5rem 0.8rem;
  margin-top: 0.4rem;
  background: transparent;
  border: none;
  color: #fff;
}

注意：如果标签长度不固定，可通过JS动态计算::after的left值，或结合CSS变量实时更新。

方法3：CSS Clip-Path裁剪边框 #

给字段容器设置完整边框后，用clip-path裁剪掉标签覆盖的区域，让边框在标签位置自然断开，无需预估标签宽度的话可配合JS动态计算裁剪路径。

示例代码：

.edit_apt_form__right--field--row {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}

.edit_apt_form__right .form-group {
  position: relative;
  flex: 1;
  border: 2px solid #你的边框颜色;
  padding: 0.5rem 0.8rem;
  /* 裁剪路径：顶部留出标签缺口 */
  clip-path: polygon(0 1rem, 0.8rem 1rem, 0.8rem 0, calc(0.8rem + 6rem) 0, calc(0.8rem + 6rem) 1rem, 100% 1rem, 100% 100%, 0 100%);
}

.edit_apt_form__right .form-group label {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  position: absolute;
  top: -0.6rem;
  left: 0.8rem;
  z-index: 1;
}

.edit_apt_form__right .form-group input {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  margin-top: 0.4rem;
}

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