字段集和圖例的自定義邊框

Question

如果之前詢問過此問題，我的朋友要求我爲他們的網站進行這種字段集操作。

截圖在這個環節custom fieldset border

它看起來像一個正常的人，但我很好奇我怎麼在左邊和右邊那個小豎線「宗旨，以保存」的文字。

幫助將不勝感激。

問候，

Answer 1

您可以使用:before和:after僞元素，以風格這兩個特定的垂直線：

fieldset { 
 
    border:1px solid gray; 
 
} 
 
legend { 
 
    padding: 0.2em 0.5em; 
 
    color: gray; 
 
    font-size:90%; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 
legend:before { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-left: 1px solid gray; 
 
    left: 0px; 
 
    top: 7px; 
 
} 
 
legend:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-right: 1px solid gray; 
 
    right: 0px; 
 
    top: 7px; 
 
}

<form> 
 
    <fieldset> 
 
    <legend>Subscription info</legend> 
 
    <label for="name">Username:</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <br /> 
 
    <label for="mail">E-mail:</label> 
 
    <input type="text" name="mail" id="mail" /> 
 
    <br /> 
 
    <label for="address">Address:</label> 
 
    <input type="text" name="address" id="address" size="40" /> 
 
    </fieldset> 
 
</form>

Answer 2

這裏是一定的改善。

fieldset { 
 
    border:1px solid gray; 
 
} 
 
legend { 
 
    position: relative; 
 
    left: 50%; 
 
    /* Move the legend to the center of the fieldset's top border */ 
 

 
    transform: translateX(-50%); 
 
    /* Fix the alignment to center perfectly */ 
 

 
    background-color: white; 
 
    /* Put whatever color you want */ 
 

 
    padding: 0.2em 0.5em; 
 
    color: gray; 
 
    font-size:90%; 
 
    text-align:center; 
 
    position: relative; 
 
} 
 
legend:before { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-left: 1px solid gray; 
 
    left: 0px; 
 
    top: 7px; 
 
} 
 
legend:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 8px; 
 
    border-right: 1px solid gray; 
 
    right: 0px; 
 
    top: 7px; 
 
} 
 
#line { 
 
    position: absolute; 
 
    top: 19px; /* Position the line */ 
 
    left: 12px; 
 
    border-top: 1px solid gray; 
 
    min-width: 20%; /* Fix this according to the white space to hide */ 
 
}

<form> 
 
    <fieldset> 
 
<!-- Add a div here to make up a line to hide 
 
     the space left by the legend --> 
 
    <div id="line"></div> 
 
    <legend>Subscription info</legend> 
 
    <label for="name">Username:</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <br /> 
 
    <label for="mail">E-mail:</label> 
 
    <input type="text" name="mail" id="mail" /> 
 
    <br /> 
 
    <label for="address">Address:</label> 
 
    <input type="text" name="address" id="address" size="40" /> 
 
    </fieldset> 
 
</form>

希望它可以幫助...