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

Posted

技术标签:

【中文标题】如何防止背景颜色围绕图例标签【英文标题】:How to prevent background colour going around the legend tag 【发布时间】:2021-05-25 19:04:10 【问题描述】:

我想设置我的注册表单的样式,使背景颜色不会仅覆盖注册表单内部的图例标记。

例如,这就是我想要实现的目标:

这是我的结果:

我当前的代码:

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

【问题讨论】:

【参考方案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>

【讨论】:

【参考方案2】:

看看我的代码 我想这就是你要找的。​​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>

【讨论】:

以上是关于如何防止背景颜色围绕图例标签的主要内容,如果未能解决你的问题,请参考以下文章

怎么改变echarts中单个图例的背景颜色

自定义标签栏背景颜色。如何更改标签栏背景的颜色?

交换 UITextField 的 isEnabled 更改背景颜色以及如何防止它

如何在情节提要上更改标签栏背景颜色和标签栏项目颜色

在Css中如何设置span的背景颜色和背景图片

R语言ggplot2可视化:在ggplot2中将图例(legend)移到图内自定义图例所处的位置自定义图例背景图例所处边框的颜色