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

Posted 2023-03-04

【中文标题】如何设置 (css) 单选按钮和标签的样式？

【英文标题】：How do I style (css) radio buttons and labels?

【发布时间】：2010-09-07 19:16:27

【问题描述】：

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

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

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

【参考方案1】：

你的问题的第一部分可以只用 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>

关注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 中进行这项工作。

【参考方案2】：

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

input:checked + label 
    color: white;
  

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

【讨论】：

不错！与 firefox 配合使用，这对于这个内部 webapp 来说已经足够了。这是最干净的解决方案。谢谢！

【参考方案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>