フィールドセットと凡例のためのカスタム境界

Question

申し訳ありませんこの質問が以前に尋ねられた場合、私の友人は自分のウェブサイトのこの種のフィールドセットを行うように頼んだ。このリンクで

スクリーンショットcustom fieldset border

それは正常なもののように見えますが、私は左と右サイドにはほとんど垂直線テキストを「目指すは維持する」ことを得るのですか興味があります。

ヘルプは高く評価されます。あなたはこれらの2つの特定の垂直線のスタイルを設定するために、:beforeと:after擬似要素を使用することができます

Answer 1

よろしく、：

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>

は、あなたが答えを確認しました