如何用div和label复刻fieldset+legend经典表单效果（label需透明背景）

实现方案 #

要复刻fieldset+legend的经典视觉效果，同时让label保持透明背景，可以通过CSS定位和伪元素来实现，具体代码如下：

HTML结构（使用你指定的元素）

<div class="custom-fieldset">
  <label class="custom-legend">
    表单分组标题
  </label>
  <!-- 可添加表单元素，如输入框、复选框等 -->
  <input type="text" placeholder="请输入内容">
</div>

CSS样式

/* 模拟fieldset的容器样式 */
.custom-fieldset {
  border: 1px solid #999;
  border-top: none;
  padding: 1.8em 1em 1em;
  position: relative;
  font-family: inherit;
  font-size: 1em;
}

/* 用伪元素生成顶部左右两段边框，模拟fieldset边框在legend位置断开的效果 */
.custom-fieldset::before,
.custom-fieldset::after {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  background-color: #999;
  width: calc(50% - 7em);
}

.custom-fieldset::before {
  left: 0;
}

.custom-fieldset::after {
  right: 0;
}

/* 模拟legend的label样式 */
.custom-legend {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.8em;
  background-color: transparent;
  font-weight: bold;
  font-size: inherit;
  border: none;
}

关键细节说明

• 移除div的顶部边框，改用伪元素生成左右两段顶部边框，避免透明背景下边框穿过文字的问题。
• 通过绝对定位和transform将label精准定位到顶部边框的中间位置，和原生legend的视觉位置完全匹配。
• 明确设置label的background-color: transparent，确保背景完全透明，不会遮挡下方内容。
• 可根据需求调整边框颜色、留白大小、字体样式等参数，适配不同设计风格。

内容的提问来源于stack exchange，提问作者Christian M.