字段集和图例的自定义边框

Question

sorry if this question has been asked before, my friend asked me to do this sort of fieldset for their website.

screenshot in this link custom fieldset border

it looks like a normal one but I'm curious how do I get that little vertical line on the left and the right side of "Aim to preserve" text.

Help would be highly appreciated.

Regards,

Answer 1

You can use the :before and :after pseudo elements in order to style these two specific vertical lines:

 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

Here is some improvement.

 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> 

Hope it helps...