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

问题描述

鉴于下面的代码，我如何将单选按钮设置在标签旁边，并将所选单选按钮的标签设置为与其他标签不同的样式?

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>

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

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:

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

他们的文档都在这里:Yahoo！用户界面库

@pkaeding:谢谢.我尝试了一些漂浮的东西，看起来很乱.样式化的活动单选按钮似乎可以通过一些 input[type=radio]:active 提名在谷歌搜索中实现，但我没有让它正常工作.所以我猜想的问题更多:这在当今所有的现代浏览器上是否可行，如果不行，需要的最小 JS 是多少?

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

推荐答案

你的问题的第一部分可以只用 HTML &CSS；您需要在第二部分使用 Javascript.

The first part of your question can be solved with just HTML & CSS; you'll need to use Javascript for the second part.

我不确定您所说的旁边"是什么意思:在同一行和附近，还是在不同的行上?如果您希望所有单选按钮位于同一行，只需使用边距将它们分开即可.如果你想让他们每个人都在自己的线上，你有两个选择(除非你想冒险进入 float: 领域):

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

• 使用 <br/>s 将选项分开，并使用一些 CSS 将它们垂直对齐:

• Use <br />s to split the options apart and some CSS to vertically align them:

<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 这样的库非常适合这个:

Styling the <label> is why you'll need to resort to Javascript. A library like jQuery is perfect for this:

<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 中进行这项工作.

The focus and blur hooks are needed to make this work in IE.

这篇关于如何设置 (css) 单选按钮和标签的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

---