[英]How to prevent background colour going around the legend tag
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>
You have to set the background-color
in fieldset
您必须在
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.