时间戳

首页 > 解决方案 > 如何通过标签的一部分显示字段集边框？

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

问题描述

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

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>

标签： htmlcsslegendfieldset

解决方案

额外的 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>

推荐阅读