设置表单特定部分的样式(HTML和CSS)
设置表单特定部分的样式(HTML和CSS)
提问于 2018-08-16 05:55:20
我想对表单的特定部分设置样式，但使用label[for="gender:"]之类的选择器失败了(即为单选按钮添加更多空间)。我不想添加一个字段集(我在整个表单中有一个)，或者创建一个特殊的类或ID，我想知道如何在不添加不必要的语法的情况下对表单的特定部分设置样式。
我已经使用了"Gender“标签作为示例，以及单选按钮(我确实想设置样式)，但我真的需要一些更一般的帮助来使用选择器来设置表单的特定部分的样式。
这是我的语法，以及我目前正在使用的Trinket页面的链接(这主要是为了学习和练习，而不是为了发布)。任何帮助都将不胜感激。谢谢!
#Container {
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
font-family: garamond, serif;
font-size: 16px;
}
header {
color: blue;
font-size: 30pt;
text-shadow: 16px 8px 16px grey;
}
#MainBody {
margin-top: 15px;
margin-bottom: 15px;
}
form {
float: left;
}
img {
float: right;
height: auto;
width: 25%;
transform: translate(-400px, -300px);
}
.Sidebar {
background-color: #f2f2f2;
display: inline-block;
}
nav {
text-align: center;
background-color: #f2f2f2;
padding: 10px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
text-decoration-color: #000;
}
a:active {
text-decoration: underline;
}
#button1, #button2, #button3, #button4, #button5 {
background-color: #4CAF50;
padding: 8px;
box-shadow: 1px 2px #888888;
border-radius: 16px;
transition: opacity 1s ease-in;
}
#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover {
background-color: white;
opacity: 0.30;
}
#button1a, #button2a, #button3a, #button4a {
background-color: #4BC402;
padding: 8px;
box-shadow: 1px 2px #888888;
border-radius: 16px;
transition: opacity 1s ease-in;
}
#button1a:hover, #button2a:hover, #button3a:hover, #button4a:hover {
background-color: white;
opacity: 0.30;
}
.contactform {
width: 800px;
font-size: 16px;
}
#contactmetext {
font-size: 16px;
}
.message {
width: 50%;
height: 100px;
font-family: garamond, serif;
font-size: 16px;
}
footer {
text-align: center;
margin-top: 5px;
}<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>The World's Strangest Facts</title>
<style>
<!-- Separated for a CSS snippet -->
</style>
</head>
<body>
<a name="homeend"></a>
<!-- Container Starts Here -->
<div id="Container">
<!-- Header Section Starts Here -->
<header>
<div id="HeaderOne">
<h1 style="text-align: center">StrangeNET</h1>
</div>
<div id="HeaderTwo">
<h3 style="text-align: center">The World's Strangest Facts</h3>
</div>
</header>
<!-- Header Section Ends Here -->
<hr />
<!-- Nav Menu Starts Here -->
<nav>
<ul>
<button id="button1a"><li><a href="#homeend"><strong>Home</strong></a></li></button>
<button id="button2a"><li><a href="#"><strong>About</strong></a></li></button>
<button id="button3a"><li><a href="#contactend"><strong>Contact</strong></a></li></button>
<button id="button4a"><li><a href="#"><strong>Disclaimer</strong></a></li></button>
</ul>
<ul>
<button id="button1"><li><a href="#"><strong>Sociopolitical</strong></a></li></button>
<button id="button2"><li><a href="#"><strong>History</strong></a></li></button>
<button id="button3"><li><a href="#"><strong>Earth & Nature</strong></a></li></button>
<button id="button4"><li><a href="#"><strong>The Cosmos</strong></a></li></button>
<button id="button5"><li><a href="#"><strong>Technology</strong></a></li></button>
</ul>
</nav>
<!-- Nav Menu Ends Here -->
<hr />
<!-- Main Content Starts Here -->
<div id="MainBody">
<p>Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
</div>
<!-- Main Content Ends Here -->
<!-- Contact Form Starts Here -->
<aside>
<div class="Sidebar">
<form>
<fieldset class="contactform">
<h3 id="contactmetext">Contact Me</h3>
<a name="contactend"></a>
<legend><strong>Personal Information</strong></legend>
<label>First Name:</label><br />
<input name="firstname" type="text" /><br />
<label>Last Name:</label><br />
<input name="lastname" type="text" /><br />
<label>Email:</label><br />
<input name="email" type="email" /><br />
<label>Gender:</label><br />
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br />
<label for="msg">Message</label><br />
<textarea class="message">Enter your message here...</textarea><br />
<input type="submit" value="Send" class="submit" />
<img src="contactme.jpg" alt="Postik Note">
</fieldset>
</form>
<!-- Relative image address changed for Trinket only -->
</div>
</aside>
<!-- Contact Form Ends Here -->
<hr />
<!-- Footer Starts Here -->
<footer>
<span>Mathew J. M. | 2018 ©</span>
</footer>
<!-- Footer Ends Here -->
</div>
<!-- Container Ends Here -->
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-16 08:27:22
我要稍微重新定义一下。你提到你想要避免"uneccesary语法“。我认为你的br标签就是这样的。它们在语义上几乎没有意义，没有给你提供任何样式，并强制中断。假设对于较宽的屏幕，您希望在同一行上显示标签和元素，但对于窄屏幕，您不能使用br标记。
因此，让我们去掉不常见的br标记，并添加一些有意义的fieldset标记。
/*Added Style*/
/*Make Labels Block Elements > is child selector*/
.contactform > label
{
display:block;
padding-top:5px;
padding-bottom: 3px;
}
/*Reset styling of nested fieldsets*/
.contactform fieldset
{
border: none;
padding: 0;
}
/*Add some margin to the nestes labels, but only if they follow a radio button*/
/* + is the adjacent sibling selector */
.contactform fieldset input[type='radio'] + label
{
margin-left:2px;
margin-right: 20px;
}
/*END ADDED STYLES*/
form {
float: left;
}
img {
float: right;
height: auto;
width: 25%;
transform: translate(-400px, -300px);
}
.Sidebar {
background-color: #f2f2f2;
display: inline-block;
}
a {
text-decoration: none;
color: black;
}
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
text-decoration-color: #000;
}
a:active {
text-decoration: underline;
}
.contactform {
width: 800px;
font-size: 16px;
}
#contactmetext {
font-size: 16px;
}
.message {
width: 50%;
height: 100px;
font-family: garamond, serif;
font-size: 16px;
}<!-- Contact Form Starts Here -->
<aside>
<div class="Sidebar">
<form>
<fieldset class="contactform">
<h3 id="contactmetext">Contact Me</h3>
<a name="contactend"></a>
<legend><strong>Personal Information</strong></legend>
<label for="firstname">First Name:</label>
<input name="firstname" id="firstname" type="text" />
<label for="lastname">Last Name:</label>
<input name="lastname" id="lastname" type="text" />
<label for="email">Email:</label>
<input name="email" id="email" type="email" />
<label>Gender:</label>
<fieldset>
<input type="radio" name="gender" value="male" id="gender_male"> <label for="gender_male">Male</label>
<input type="radio" name="gender" value="female" id="gender_female"> <label for="gender_female">Female</label>
</fieldset>
<label for="msg">Message</label><br />
<textarea class="message" id="mdg">Enter your message here...</textarea><br />
<input type="submit" value="Send" class="submit" />
<img src="contactme.jpg" alt="Postik Note">
</fieldset>
</form>
<!-- Relative image address changed for Trinket only -->
</div>
</aside>
<!-- Contact Form Ends Here -->
一些需要注意的事情。我已经将ids添加到表单元素中，并将for属性添加到标签中。因为您的标签没有for属性，所以您的label[for="gender:"]选择器无法工作。显式地将表单元素与其标签相关联可添加功能。现在，单击文本字段的标签将焦点带到该字段，单击单选按钮或复选框的标签将选中该元素。它在可访问性方面提供了优势。
我不想过多地修改您的标记，但可以考虑使用
<fieldset>
<legend>Gender:</legend>
<input type="radio" name="gender" value="male" id="gender_male"> <label for="gender_male">Male</label>
<input type="radio" name="gender" value="female" id="gender_female"> <label for="gender_female">Female</label>
</fieldset>您需要对那里的样式进行更多的调整。
有关我使用的组合子的更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators
最后一个建议:了解浏览器开发人员工具。大多数浏览器中的F12。这将使您能够查看哪些样式应用于哪些元素，并使您能够在浏览器中对它们进行实验。同样重要的是，它们将向您显示哪些样式正在被覆盖以及被哪些样式覆盖。这可以帮助解决特异性问题。
Stack Overflow用户
发布于 2018-08-16 06:10:57
设置性别按钮样式的一种方法是利用您设置的属性：
input[name='gender'] {
height: 25px;
width: 25px;
border-radius: 50%;
}小提琴在这里：https://jsfiddle.net/dnwc0b4p/4/
对于一般的建议，我可以理解不想使用类或ID，但从长远来看，习惯它们会给你带来很大的好处(例如BEM naming convention)。
类是我们以人类可以理解而不是计算机可以理解的方式组织HTML的方式。
Stack Overflow用户
发布于 2018-08-16 06:11:10
如果您真的使用label[for="gender:"]作为选择器，原因很明显:输入的name是gender，而不是gender:，所以您的选择器应该是label[for="gender"]
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51866995
复制相关文章
相似问题