如何通过标签的一部分显示字段集边框？答案

【问题标题】：How to show the fieldset border through a section of the label?如何通过标签的一部分显示字段集边框？
【发布时间】：2021-08-13 03:27:02
【问题描述】：

我有一个带有字段集的表单，并希望保留边框，但希望在某些文本图例之间显示边框。我无法让图例具有透明背景以让边框通过（被某些文本元素阻挡）。

legend {
    display:flex;
    justify-content:space-between;
    width: 100%;
    background-color: transparent;
}

legend div {
    background-color: white;
    margin-left:0.5em;
    margin-right:0.5em;
}

<form>
  <fieldset>
    <legend><div>Form Item</div><div>(extra 1)</div></legend>
    <label>Input:</label><input></input>
  </fieldset>
</form>

【问题讨论】：

background: linear-gradient(black ,black) center / 100% 1px no-repeat; <legend>

标签： html css legend fieldset

【解决方案1】：

额外的 div 破解。如果有办法在没有额外 div 的情况下做到这一点，那就太好了。

我想如果我强制使用 fieldset 边框（chrome 的默认边框是 2px 凹槽三面），它可以正常工作。

fieldset {
    border: 1px solid black;
}

legend {
    display:flex;
    justify-content:space-between;
    width: 100%;
    position: relative;
}
legend div {
    background-color: white;
    margin-left:0.5em;
    margin-right:0.5em;
}
legend div.line {
    flex: 1 1 auto;
    background-color: transparent;
}

legend div.line:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0px;
    right: 0px;
    top: 50%;
    border-top: 1px solid black;
}

<form>
  <fieldset>
    <legend><div>Form Item</div><div class="line"></div><div>(extra 1)</div></legend>
    <label>Input:</label><input></input>
  </fieldset>
</form>

【讨论】：

当然border-top在firefox中是关闭了1px（top: calc(50% - 1px);或margin-top: -1px;工作）

【解决方案2】：

background 可以在没有额外 div 的情况下近似此值。您只需要找到正确的颜色：

fieldset {
  border: 1px solid black;
}

legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: linear-gradient(black 0 0)center/100% 1px no-repeat;
}

legend div {
  background-color: white;
  padding:0 0.5em;
}

<form>
  <fieldset>
    <legend>
      <div>Form Item</div>
      <div>(extra 1)</div>
    </legend>
    <label>Input:</label><input>
  </fieldset>
</form>

【讨论】：