如何设置 (css) 单选按钮和标签的样式？

Question

给定下面的代码，如何将单选按钮设置为位于标签旁边，并将所选单选按钮的标签设置为与其他标签不同的样式？

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

另外让我声明一下，我使用 yui css 样式作为基础。 如果您不熟悉它们，可以在这里找到它们：

• reset-fonts-grids.css
• base-min.css

此处的文档：Yahoo! UI 库

@pkaeding：谢谢。 我尝试了一些漂浮的东西，看起来很混乱。 样式活动单选按钮似乎可以通过谷歌搜索上的一些输入[type=radio]：活动提名来实现，但我没有让它正常工作。 所以我猜想更多的问题是：这在当今所有现代浏览器上都可能吗？如果不可能，那么最少需要什么 JS？

Answer 1

这至少会让你的按钮和标签彼此相邻。 我相信第二部分不能单独用 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>

Answer 2

对于任何支持 CSS3 的浏览器，您可以使用相邻同级选择器 用于设置标签样式

input:checked + label {
    color: white;
}  

MDN 的 浏览器兼容性表 说基本上所有当前流行的桌面和移动浏览器（Chrome、IE、Firefox、Safari）都是兼容的。

Answer 3

您问题的第一部分只需 HTML & 即可解决。 CSS； 第二部分需要使用 Javascript。

让标签靠近单选按钮

我不确定“旁边”是什么意思：在同一行并靠近，还是在不同的行？ 如果您希望所有单选按钮位于同一行，只需使用边距将它们分开即可。 如果您希望它们每个人都在自己的行上，您有两个选择（除非您想冒险进入 float: 领域）：

• 使用
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>

• 按照 A List Apart 的文章：更漂亮的可访问表单

将样式应用到当前选定的标签 + 单选按钮

设置 样式是您需要求助于 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>

需要 focus 和 blur 挂钩才能在 IE 中实现此功能。