如何防止背景顏色圍繞圖例標簽

Question

我想以一種背景顏色不僅覆蓋注冊表單內部的圖例標簽的方式設置我的注冊表單的樣式。

例如，這就是我想要實現的目標：

這是我的結果：

我當前的代碼：

 #signupform { font-size: 2rem; margin: 30px; line-height: 50px; background-color: #f6f6f6; } #signupform legend { font-size: 3rem; }

 <section class="subscribe"> <h2>SUBSCRIBE</h2> <p>Sign up to our newsletter and receive exclusive offers by email weekly.</p> <form id="signupform"> <fieldset> <legend>SIGN UP NOW:</legend> <label for="name">Your name:</label> <input type="text" name="name" id="name"> <label for="mail">Email address:</label> <input type="text" name="mail" id="mail"> <button type="button" class="signupbutton">Sign up</button> </fieldset> </form> </section>

Answer 1

您必須在fieldset集中設置background-color

 #signupform { font-size: 2rem; margin: 30px; line-height: 50px; } fieldset { background-color: #f6f6f6; } #signupform legend { font-size: 3rem; }

 <section class="subscribe"> <h2>SUBSCRIBE</h2> <p>Sign up to our newsletter and receive exclusive offers by email weekly.</p> <form id="signupform"> <fieldset> <legend>SIGN UP NOW:</legend> <label for="name">Your name:</label> <input type="text" name="name" id="name"> <label for="mail">Email address:</label> <input type="text" name="mail" id="mail"> <button type="button" class="signupbutton">Sign up</button> </fieldset> </form> </section>

Answer 2

看看我的代碼
我想這就是你要找的。

 #signupform { font-size: 2rem; margin: 30px; line-height: 50px; background-color: #d4d4d4; padding: 1rem; } fieldset{ background-color: #f6f6f6; } #signupform legend { font-size: 3rem; }

 <section class="subscribe"> <h2>SUBSCRIBE</h2> <p>Sign up to our newsletter and receive exclusive offers by email weekly.</p> <form id="signupform"> <fieldset> <legend>SIGN UP NOW:</legend> <label for="name">Your name:</label> <input type="text" name="name" id="name"> <br /> <label for="mail">Email address:</label> <input type="text" name="mail" id="mail"> <button type="button" class="signupbutton">Sign up</button> </fieldset> </form> </section>