如何使用 CSS 和 jQuery 创建自定义单选按钮

答案：使用 CSS `:checked` Pseudo-class with jQuery

如果尝试直接使用 background 或 border 之类的 CSS 属性来设置单选按钮的样式，它将无法正常工作，因为大多数表单元素都是浏览器的原生部分，并且不接受这么多的视觉样式。所以我们必须找到另一种样式单选按钮的方法。

在本教程中，我们将借助 CSS 和一点点 jQuery 创建自定义单选按钮。还有许多其他可用的解决方案，例如用于自定义单选按钮的 jQuery 插件，但它们过于复杂且不易实现。在这里，我们将以最小的努力模拟自定义单选按钮的效果，就像魅力一样，在任何项目中都非常容易实现。它跨浏览器高度兼容，甚至在 Internet Explorer 7 中也能完美运行。

HTML 代码

像在常规 HTML 中一样创建单选按钮并将其放置在任何位置，但不要忘记放置 name 属性，因为此解决方案取决于单选的 name 属性按钮，如果您想将单选按钮置于实际操作中，这也是必需的。

示例

Try this code »

<form action="action.asp" method="post">
    <h3>What Is Your Favorite Web Browser</h3>
    <label><input type="radio" name="browser" checked="checked" value="firefox"> Firefox</label>
    <label><input type="radio" name="browser" value="chrome"> Chrome</label>
    <label><input type="radio" name="browser" value="safari"> Safari</label>
</form>

自定义单选按钮示例图片

为简单起见，我们使用单独的图像来指定单选按钮的不同状态，如正常、悬停、选中等，但建议在实际项目中使用此解决方案之前将所有这些图像组合成图片精灵形式更好的性能和最小化 HTTP 请求。但是，如果您下载此自定义单选按钮示例的源代码，它将包含简单版本和精灵版本。让我们看一下以下图片。

CSS 代码

我们试图用 CSS 做的是在 CSS opacity 属性的帮助下隐藏默认单选按钮，并显示我们的自定义单选按钮来代替它们。

现在将以下样式规则放在 HTML 文档的 head 部分中。

示例

Try this code »

<style>
.custom-radio{
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    z-index: 1;
    top: 3px;
    background: url("radio.png") no-repeat;
}
.custom-radio:hover{            
    background: url("radio-hover.png") no-repeat;
}
.custom-radio.selected{
    background: url("radio-selected.png") no-repeat;
}
.custom-radio input[type="radio"]{
    margin: 1px;
    position: absolute;
    z-index: 2;            
    cursor: pointer;
    outline: none;
    opacity: 0;
}
</style>

您可能会认为我们没有在 HTML 代码中的任何地方使用这些类；实际上这些类将在运行时由 jQuery 添加到 DOM 中。

jQuery 代码

我们的 customRadio() 函数只是将默认单选按钮包装在 <span> 元素中，并在其上应用 .custom-radio 类。一旦 .custom-radio 类应用于 <span> 元素，CSS 就会发挥作用，我们的自定义单选按钮图像将显示在默认单选按钮的位置。此外，不要忘记在此脚本之前将 jQuery 包含在您的文档中。我们在 DOM 完全加载时调用了 customRadio() 函数。

示例

Try this code »

<script>
function customRadio(radioName){
    var radioButton = $('input[name="'+ radioName +'"]');
    $(radioButton).each(function(){
        $(this).wrap( "<span class='custom-radio'></span>" );
        if($(this).is(':checked')){
            $(this).parent().addClass("selected");
        }
    });
    $(radioButton).click(function(){
        if($(this).is(':checked')){
            $(this).parent().addClass("selected");
        }
        $(radioButton).not(this).each(function(){
            $(this).parent().removeClass("selected");
        });
    });
}
// 调用 customRadio 函数
$(document).ready(function (){
    customRadio("browser");
});
</script>

提示：如果在浏览器中禁用了 JavaScript，则会出现普通单选按钮，而不是自定义单选按钮。所以它不会以任何方式破坏你的代码。

Download Source Code

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

如何使用 CSS 和 jQuery 创建自定义单选按钮

答案：使用 CSS :checked Pseudo-class with jQuery

HTML 代码

示例

自定义单选按钮示例图片

CSS 代码

示例

jQuery 代码

示例

FAQ 相关问题解答

关于我们

联系方式

互动工具

答案：使用 CSS `:checked` Pseudo-class with jQuery