Html 如何设置 (css) 单选按钮和标签的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I style (css) radio buttons and labels?
提问by Alexander Morland
Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels?
鉴于下面的代码，我如何将单选按钮设置为标签旁边的样式并将所选单选按钮的标签设置为与其他标签不同的样式？
<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="color" value="" id="SubmitQuestion" />
<input type="radio" name="color" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="color" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="color" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>Also let me state that I use the yui css styles as base. If you are not familir with them, they can be found here:
另外让我声明我使用 yui css 样式作为基础。如果您不熟悉它们，可以在此处找到它们：
Documentation for them both here : Yahoo! UI Library
他们的文档在这里：雅虎！用户界面库
@pkaeding: Thanks. I tried some floating both thing that just looked messed up. The styling active radio button seemed to be doable with some input[type=radio]:active nomination on a google search, but I didnt get it to work properly. So the question I guess is more: Is this possible on all of todays modern browsers, and if not, what is the minimal JS needed?
@pkaeding：谢谢。我尝试了一些漂浮的东西，看起来一团糟。样式激活单选按钮似乎可以通过一些 input[type=radio]:active 提名在谷歌搜索中实现，但我没有让它正常工作。所以我猜的问题更多：这在当今所有的现代浏览器上是否可行，如果不是，那么最少需要什么 JS？
回答by Chris Zwiryk
The first part of your question can be solved with just HTML & CSS; you'll need to use Javascript for the second part.
你的问题的第一部分可以用 HTML 和 CSS 来解决；您需要在第二部分使用 Javascript。
Getting the Label Near the Radio Button
在单选按钮附近获取标签
I'm not sure what you mean by "next to": on the same line and near, or on separate lines? If you want all of the radio buttons on the same line, just use margins to push them apart. If you want each of them on their own line, you have two options (unless you want to venture into float:territory):
我不确定您所说的“旁边”是什么意思：在同一行和附近，还是在不同的行上？如果您希望所有单选按钮都在同一行上，只需使用边距将它们分开。如果您希望它们各自独立，您有两种选择（除非您想冒险进入该float:领域）：
- Use
<br />sto split the options apart and some CSS to vertically align them:
- 使用
<br />s分割开的选项和一些CSS来垂直对齐它们：
<style type='text/css'>
.input input
{
width: 20px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
- Follow A List Apart's article: Prettier Accessible Forms
- 按照A List Apart的文章：Prettier Accessible Forms
Applying a Style to the Currently Selected Label + Radio Button
将样式应用于当前选定的标签 + 单选按钮
Styling the <label>is why you'll need to resort to Javascript. A library like jQueryis perfect for this:
样式<label>是您需要求助于 Javascript 的原因。像jQuery这样的库
非常适合：
<style type='text/css'>
.input label.focused
{
background-color: #EEEEEE;
font-style: italic;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.input :radio').focus(updateSelectedStyle);
$('.input :radio').blur(updateSelectedStyle);
$('.input :radio').change(updateSelectedStyle);
})
function updateSelectedStyle() {
$('.input :radio').removeClass('focused').next().removeClass('focused');
$('.input :radio:checked').addClass('focused').next().addClass('focused');
}
</script>
The focusand blurhooks are needed to make this work in IE.
在focus和blur钩子需要作出IE这项工作。
回答by Henrik Gustafsson
For any CSS3-enabled browser you can use an adjacent sibling selectorfor styling your labels
对于任何支持 CSS3 的浏览器，您都可以使用相邻的同级选择器来设置标签样式
input:checked + label {
color: white;
}
MDN's browser compatibility tablesays essentially all of the current, popular browsers (Chrome, IE, Firefox, Safari), on both desktop and mobile, are compatible.
MDN 的浏览器兼容性表表明，基本上所有当前流行的浏览器（Chrome、IE、Firefox、Safari），在桌面和移动设备上都是兼容的。
回答by pkaeding
This will get your buttons and labels next to each other, at least. I believe the second part can't be done in css alone, and will need javascript. I found a page that might help you with that part as well, but I don't have time right now to try it out: http://www.webmasterworld.com/forum83/6942.htm
至少，这将使您的按钮和标签彼此相邻。我相信第二部分不能单独在 css 中完成，并且需要 javascript。我找到了一个页面也可以帮助您完成该部分，但我现在没有时间尝试：http: //www.webmasterworld.com/forum83/6942.htm
<style type="text/css">
.input input {
float: left;
}
.input label {
margin: 5px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
