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样式作为基础。如果你不熟悉他们，可以在这里找到：

这里的文档：Yahoo! UI Library

@pkaeding：谢谢。我尝试了一些漂浮的东西，只是看起来搞砸了。样式活动单选按钮似乎可以使用一些输入[type = radio]：谷歌搜索上的主动提名，但我没有让它正常工作。所以我想的问题更多：这在今天的所有现代浏览器中是否可行，如果不是，那么最小的JS需要什么？

Answer 1

您的问题的第一部分可以通过HTML＆amp; 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>

关注 A List Apart 的文章：Prettier Accessible Forms

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

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

需要focus和blur挂钩才能在IE中使用。

Answer 2

对于任何支持CSS3的浏览器，您可以使用adjacent sibling selector为标签设置样式

input:checked + label {
    color: white;
}

MDN的browser compatibility table表示，桌面和移动设备上当前所有流行的浏览器（Chrome，IE，Firefox，Safari）都是兼容的。

Answer 3

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

如何设置样式（css）单选按钮和标签？

3 个答案:

使标签靠近单选按钮

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