如何通过CSS自定义改变单选框样式＜input type=“radio“＞

最新推荐文章于 2022-12-15 11:47:56 发布

fanfan_fxh

最新推荐文章于 2022-12-15 11:47:56 发布

阅读量288

点赞数

分类专栏：前端前端--CSS 前端实战项目文章标签： css html

本文链接：https://blog.csdn.net/wangbadandzy/article/details/114264187

版权

前端同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

前端实战项目

7 篇文章 0 订阅

订阅专栏

前端--CSS

6 篇文章 0 订阅

订阅专栏

通过CSS自定义改变radio样式

效果图：

自定义单选框样式效果图

代码如下：

复制即可使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义单选框样式</title>
    <style>
        .radio-box {
            min-height: 36px;
            padding: 14px 4px 0 12px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .radio-box>input {
            display: none;
        }
        
        .radio-box>label {
            position: relative;
            margin-right: 34px;
            font-size: 16px;
            color: #333;
            text-align: left;
        }
        
        .radio-box>label::before {
            display: inline-block;
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid rgb(219, 219, 219);
            margin-right: 6px;
            vertical-align: bottom;
        }
        
        .radio-box>input:checked+label::before {
            background-color: #1ea0fa;
        }
        
        .radio-box>input:checked+label::after {
            display: inline-block;
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            left: 6px;
            bottom: 6px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="radio-box">
        <input type="radio" nam     e="sex" id="sex1" value="男">
        <label for="sex1" style="cursor:pointer">男</label>
    </div>
    <div class="radio-box">
        <input type="radio" name="sex" id="sex2" value="女">
        <label for="sex2" style="cursor:pointer">女</label>
    </div>

</body>

</html>

fanfan_fxh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何通过CSS自定义改变单选框样式＜input type=“radio“＞

通过CSS自定义改变radio样式效果图：代码如下：复制即可使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini
复制链接

扫一扫