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

<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
• 基本最小css

他们俩的文档在这里：Yahoo! UI库

@pkaeding：谢谢。我尝试了一些漂浮的东西，看起来只是一团糟。样式有效的单选按钮似乎可以通过一些输入[type = radio]：在Google搜索上进行有效的提名来实现，但是我没有使它正常工作。因此，我猜的问题更多：在当今的所有现代浏览器中都可能做到这一点，如果没有，那么所需的最小JS是多少？

解决方案

回答

这将使按钮和标签至少彼此相邻。我相信第二部分不能仅在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>

回答

问题的第一部分只能使用HTML和CSS来解决；我们需要在第二部分中使用Javascript。

使标签靠近单选按钮

我不确定"旁边"是什么意思：在同一行和附近，还是在单独的行上？如果我们希望所有单选按钮都在同一行上，只需使用边距将其分开。如果我们希望每个人都按自己的路线行事，则有两个选择(除非我们想冒险进入" float："领域)：

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

• 遵循列表管理员的文章：更漂亮的可访问表格

将样式应用于当前选择的标签+单选按钮

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

要使此功能在IE中起作用，需要使用focus和Blur挂钩。

回答

对于任何支持CSS3的浏览器，我们都可以使用相邻的兄弟选择器来设置标签样式

input:checked + label {
    color: white;
}

MDN的浏览器兼容性表显示，台式机和移动设备上基本上所有当前流行的浏览器(Chrome，IE，Firefox，Safari)都是兼容的。