自定义单选按钮

最新推荐文章于 2024-07-11 12:05:32 发布

lvxinaidou

最新推荐文章于 2024-07-11 12:05:32 发布

阅读量274

点赞数

分类专栏： CSS HTML JavaScript 面试常见问题

本文链接：https://blog.csdn.net/lvxinaidou/article/details/99440314

版权

JavaScript 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

@自定义单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3美化单选按钮</title>
    <style>
        /*隐藏input*/
        label.bui-radios-label input[type="radio"]{
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }
        /*自定义radio*/
        label.bui-radios-label .bui-radios{
            display: inline-block;
            position: relative;
            width: 13px;
            height: 13px;
            background-color: #fff;
            border: 1px solid #979797;
            border-radius: 50%;
            vertical-align: -2px;
            margin-right: 5px;
        }
        /*单选框选中后，自定义radio的样式*/
        label.bui-radios-label input[type="radio"]:checked + .bui-radios:after{
            position: absolute;
            content: "";
            width: 7px;
            height: 7px;
            background-color: #fff;
            border-radius: 50%;
            top: 3px;
            left: 3px;
        }
        label.bui-radios-label input[type="radio"]:checked + .bui-radios{
            background-color: #008afe;
            border:1px solid #008afe;
        }
        /*label.bui-radios-label input[type="radio"]:disabled + .bui-radios{
            background-color: #e8e8e8;
            border:1px solid #979797;
        }
        label.bui-radios-label input[type="radio"]:disabled:checked + .bui-radios:after{
            background-color: #c1c1c1;
        }*/
        /*自定义radio的过渡效果*/
        /*label.bui-radios-label.bui-radios-anim .bui-radios{
            -webkit-transition:background-color ease-out .5s;
            transition:background-color ease-out .5s;
        }*/
    </style>
</head>
<body>
  
    <label class="bui-radios-label">
        <input type="radio" name="sex"><i class="bui-radios"></i>男
    </label>
    <label class="bui-radios-label">
        <input type="radio" name="sex"><i class="bui-radios"></i>女
    </label>
</body>
</html>

运行结果：
在这里插入图片描述

lvxinaidou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义单选按钮

@自定义单选按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3美化单选按钮</title> <style> /*隐藏input*/ label.bui-ra...
复制链接

扫一扫

专栏目录