如何通過label的一部分顯示fieldset邊框？

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 凹槽三面），它可以正常工作。

 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

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>