自定义单选框样式方法

最新推荐文章于 2023-08-29 17:14:34 发布

Kim丶

最新推荐文章于 2023-08-29 17:14:34 发布

阅读量3k

点赞数 2

分类专栏： web 文章标签：自定义单选框

本文链接：https://blog.youkuaiyun.com/u010689561/article/details/83119945

版权

web 专栏收录该内容

22 篇文章

订阅专栏

当遇到默认单选框样式不满意时，可以利用label与input的绑定，通过隐藏单选框并显示伪元素来实现样式自定义。通过:checked选择器，可以控制用户点击后伪元素的内容或样式变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素的初始样式都不怎么好看，我们一般修改样式会想到直接在那元素上添加样式，比如background、border等，在大多数元素上是可以这么做，但当遇上了单选框会毫无反应。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style无法直接修改单选框样式</title>
    <style>
        .radio{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<input type="radio" class="radio"/>
</body>
</html>

在这里插入图片描述

怎么解决呢？

使用label进行伪元素（或一些标签，比如i，em，span等）和input绑定，隐藏单选框，显示伪元素，且使用css选择器:checked进行点击后伪元素（或绑定标签）内容（或样式）的修改。

以下例子只是修改伪元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改单选框样式</title>
    <style>
        /*.radio{*/
        /*width: 100px;*/
        /*height: 100px;*/
        /*background-color: red;*/
        /*}*/
        .radio {
            display: none;
        }
		/* +代表相邻的元素 */
        .radio + i {
            font-style: normal;
            text-align: center;
            font-size: 16px;
        }
		/* ::after伪元素，使用伪元素，必须含有content属性，可以为'',但不可不写 */
        .radio + i::after {
            content: '☆';
        }
		/* 点击后伪元素内容变化 */
        .radio:checked + i::after {
            content: '★';
        }
    </style>
</head>
<body>
<label>
    <input type="radio" class="radio" name="aa" id="aa"/>
    <i></i>
    aa
</label>
<label>
    <input type="radio" class="radio" name="aa" id="bb"/>
    <i></i>
    bb
</label>
</body>
</html>