How to prevent background colour going around the legend tag

Question

I want to style my sign up form in a way that the background colour does not cover the legend tag only the inside of the sign-up form.

For example, this is what I am trying to achieve:

And this is my result:

My current code:

 #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

You have to set the background-color in fieldset

 #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

Take a look at my code
I think is this you are looking for.

 #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>