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

问题描述

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

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>

解决方法

额外的 div 黑客。如果有一种方法可以在没有额外 div 的情况下做到这一点，那就太好了。

我想如果我强制设置字段集边框（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>

,

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>