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

Question

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

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>

Answer 1

额外 div 技巧。如果没有额外的 div 就可以做到这一点，那就太好了。

我想如果我强制使用 fieldset 边框（chrome 的默认边框是 2px groove threedface），它工作正常。

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>

Answer 2

背景可以在没有额外 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>

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

How to show the fieldset border through a section of the label?

html

css

legend

fieldset