前端修改radio单选框的样式

最新推荐文章于 2024-05-07 02:19:47 发布

lu??xing

最新推荐文章于 2024-05-07 02:19:47 发布

阅读量1.2k

点赞数 1

分类专栏：问题文章标签： html css html5

本文链接：https://blog.csdn.net/lu_zhanzhan/article/details/120044473

版权

问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.效果一

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变单选框样式</title>
    <style>
    label{     
        position: relative;     
        margin: 0 20px;
    }    
    label::before{      
        position: absolute;   
        left: -20px;     
        width: 16px;     
        height: 16px;     
        border: 1px solid #399bfd;      
        border-radius: 50%;      
        content: "";      
        box-sizing: border-box;
    }
    input:checked+label::before{      
        background-color: white;      
        border: 5px solid #399bfd;
    }
    input[type="radio"]{     
        display: none;
    }
    </style>
</head>
<body>
    <input type="radio" name="1" id="item1"><label for="item1">选项一</label>
    <br>
    <input type="radio" name="1" id="item2"><label for="item2">选项二</label>
</body>
</html>

参考文章

2.效果二

在这里插入图片描述
代码：和效果一只差在了如下部分（可直接用效果一的代码，然后改一下这个地方就可以了）

3.效果三

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变单选框样式</title>
    <style>
    input[type="radio"] {
        position: absolute; /*绝对定位*/
        clip: rect(0,0,0,0); /*裁剪图像*/
    }
    label {
        display: inline-flex; /*将对象作为内联块级弹性伸缩盒显示*/
        flex-direction: row; /*主轴为水平方向，起点在左端*/
        align-items: center; /*垂直居中*/
    }
    /*紧邻lable标签的单选按钮创建伪元素*/
    input[type="radio"] + label::before {
        content: ''; /*插入内容为空*/
        display: inline-block; /*融合行内于块级*/
        width: 16px;
        height: 16px;
        border-radius: 10px; /*设置圆角*/
        border: 1px solid #666666;
        margin-right: 3px;
    }
    /*紧邻lable标签选中的单选按钮创建伪元素*/
    input[type="radio"]:checked + label::before {
        background-clip: content-box; /*背景裁剪到内容框*/
        background-color: #BB1E19;
        width: 8px;
        height: 8px;
        padding: 4px;
        border: 1px solid #BB1E19;
    }

    </style>
</head>
<body>
    <input type="radio" name="1" id="item1"><label for="item1">选项一</label>
    <br>
    <input type="radio" name="1" id="item2"><label for="item2">选项二</label>
</body>
</html>

参考文章

lu??xing

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端修改radio单选框的样式

1.效果一代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>改变单选框样式</title> <style> label{
复制链接

扫一扫