React项目复刻带标签空位的边框样式遇阻，求技术解决方案

你的核心问题是用dashed边框模拟缺口的思路错误，目标效果是顶部实心边框中间有精准缺口，标签嵌入其中，以下是修正方案：

核心思路 #

放弃border-top-style: dashed的实现，改用伪元素::before和::after分别绘制顶部左右两段实心边框，中间留出标签宽度的缺口；同时给标签添加与容器一致的背景色，让它看起来像是"嵌"在边框里。

修改后的完整代码 #

:root {
  --cor-principal: #你的主色值; /* 替换成实际颜色代码 */
  --cor-secundaria: #你的次色值; /* 替换成实际颜色代码 */
  --bg-color: #容器背景色; /* 替换成输入框所在容器的背景色 */
}

.input-container {
  position: relative;
  width: 22vh;
}

.form-control-sub {
  width: 100%;
  height: 4vh;
  padding: 13px 40px 11px 30px;
  border-radius: 20px;
  border: 5px solid var(--cor-principal);
  background-color: transparent;
  font-family: Poppins;
  font-size: 1.6vh;
  font-weight: 800;
  text-align: center;
  color: var(--cor-secundaria);
  position: relative;
  /* 隐藏原生顶部边框，用伪元素替代 */
  border-top: none;
}

/* 用伪元素绘制顶部左右两段边框 */
.form-control-sub.data::before,
.form-control-sub.data::after {
  content: '';
  position: absolute;
  top: 0;
  height: 5px; /* 和边框宽度保持一致 */
  background-color: var(--cor-principal);
}

.form-control-sub.data::before {
  left: 0;
  width: calc(59.5% - 25px); /* 对应标签左侧位置，减去一半标签宽度优化对齐 */
  border-top-left-radius: 20px;
}

.form-control-sub.data::after {
  right: 0;
  width: calc(100% - 59.5% - 25px); /* 对应标签右侧剩余宽度，减去一半标签宽度 */
  border-top-right-radius: 20px;
}

.data_label {
  position: absolute;
  top: -10px;
  left: 59.5%;
  transform: translateX(-50%); /* 让标签精准居中在缺口 */
  padding: 0 5px;
  color: var(--cor-secundaria);
  font-family: Poppins;
  font-weight: 800;
  z-index: 1;
  background-color: var(--bg-color); /* 覆盖下方边框，实现嵌入视觉效果 */
}

关键调整说明 #

• 移除输入框原生顶部边框，用两个伪元素分别构建顶部左右两段边框，中间缺口宽度匹配标签实际尺寸
• 通过transform: translateX(-50%)让标签精准居中在缺口位置
• 标签添加同容器一致的背景色，覆盖下方可能露出的边框，完美营造"嵌入"效果
• 伪元素宽度通过calc()计算，与标签的left值对应，保证缺口位置精准

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