纯css3单选框和复选框样式美化效果_简洁的单复选框ui美化特效-CSDN博客

本文链接：https://blog.csdn.net/happy_jijiawei/article/details/73567414

本文介绍了如何仅使用CSS3来美化网页中的单选框和复选框，提供了两种不同的实现方式：纯CSS写法和使用背景图片写法。通过示例代码展示了不同样式的选中状态，包括颜色、边框和图标的变化，以提升用户界面的视觉体验。

摘要由CSDN通过智能技术生成

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>移动单选按钮</title>
    <link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css">
    <style>
        /*纯CSS写法*/
        .checkbox-group input{display:none;opacity:0;}
        .checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label {
            line-height: 1;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            /*cursor: pointer;*/
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            margin:2px;
        }
        .checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {
            line-height: 20px;
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
            content: '';
            color: #fff;
            border: 1px solid #dce4e6;
            background-color: #f3f6f8;
            border-radius: 3px;
        }
        .checkbox-group input[type=checkbox]:checked+label:before,.checkbox-group input[type=radio]:checked+label:befor