如何防止图例标签周围的背景颜色

问题描述

我想设计我的注册表单的样式，使背景颜色不会只覆盖注册表单内部的图例标签。

例如，这就是我想要实现的目标：

这是我的结果：

我当前的代码：

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

解决方法

您必须在 background-color 中设置 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>

,

看看我的代码
我想这就是你要找的。​​p>

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