如何防止背景颜色围绕图例标签
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>
【讨论】:
以上是关于如何防止背景颜色围绕图例标签的主要内容,如果未能解决你的问题,请参考以下文章
交换 UITextField 的 isEnabled 更改背景颜色以及如何防止它
R语言ggplot2可视化:在ggplot2中将图例(legend)移到图内自定义图例所处的位置自定义图例背景图例所处边框的颜色