css 单选按钮样式-Html 单选按钮自定义样式

bendan520 2023年8月29日 css 0

前言：

有一天，我写了一个带有单选按钮的界面，突然想起网上其他网站上的各种单选按钮，于是我想：“改变这个圆圈怎么样？” 所以我搜索了单选按钮。 风格，都没有说要换圈圈，于是我又去网上搜索了一下。 有各种风格。 我选择了其中一个并做了一些修改。 感觉简单易懂，最重要的是效果好。 让我与您分享这一点。

原则：

前面提到，html单选按钮不提供改变其圆圈的样式，因此不可能依赖“color:#fff”这样的句子，但请考虑：

（一）html中的每个input都可以添加标签，点击标签，点击input也会被触发：

(B) label标签可以添加背景，通过其他样式可以将背景显示在文字左侧：

css选择按钮_css 单选按钮样式_css更改单选按钮选中样式

(C) 输入标签可以隐藏：

(D) 点击标签后，可以通过JS修改其背景图片：

（图片在这里）

看到这里，你是不是突然意识到，自定义单选按钮的图标只是隐藏单选按钮，然后每次点击都改变标签的背景图来达到自定义的效果，需要改变的图标稍后再选择单选按钮。 把图标改成花、植物、猫和仓鼠，无非就是改变图片而已。 如果还是不行，我们继续详细说明如下：

完成：

css更改单选按钮选中样式_css选择按钮_css 单选按钮样式

原理中提到的四点也可以看作是自定义单选按钮的四部曲：

A：没什么可说的，只是标签的使用。

<label for="sex-man" class="radio_label checked">
    <input type="radio" value="1" checked="checked" id="sex-man" name="sex" />
    男
</label>

乙：

设置背景：

背景： url() 无重复；

css 单选按钮样式_css选择按钮_css更改单选按钮选中样式

设置背景大小：

背景大小：20px 40px； （这里我的背景图是上下连接的两个图标，所以高度是背景的两倍）

设置显示方法：

显示：内联块； （将标签设置为内联块元素css 单选按钮样式，这样就可以有宽度和高度而不需要换行）

设置高度和列宽：

高度：20px； 行高：20px；

css选择按钮_css更改单选按钮选中样式_css 单选按钮样式

将文本设置在左侧：

文本缩进：20px；

C：隐藏单选按钮：显示：无；

D：这一步我使用JQuery，主要是为了方便。 首先定义一个selected css类，在所有单选按钮被点击的时候添加一个方法：找到所有同名单选按钮的标签css 单选按钮样式，去掉它们的选定样式，然后给自己添加一个选定的样式。

所选款式：

.checked {
    background-position: 0 -20px;
}

这里我使用background-position将背景图像向下偏转20px以显示所选图像。

添加点击处理程序：

$(function(){
　　//给所有的单选按钮点击添加处理
    $("input[type='radio']").click(function(){
　　　　　//找出和当前name一样的单选按钮对应的label，并去除选中的样式的class
　　　　　$("input[type='radio'][name='" $(this).attr('name') "']").parent().removeClass("checked")；
　　　　　//给自己对应的label
　　　　　$(this).parent().addClass("checked");
    });
});

附：源码

终于：

如果你想更改其他标签，或者给其他标签添加样式（如：checkbox），也可以尝试这些方法。