css美化radio选择框效果代码-html代码-BFW代码库

css美化radio选择框效果代码

代码语言：html

代码描述：css美化radio选择框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        body {
            padding: 100px;
        }
        .radio {
            display: inline-block;
            position: relative;
            line-height: 18px;
            margin-right: 10px;
            cursor: pointer;
        }
        .radio input {
            display: none;
        }
        .radio .radio-bg {
            display: inline-block;
            height: 18px;
            width: 18px;
            margin-right: 5px;
            padding: 0;
            background-color: #45bcb8;
            border-radius: 100%;
            vertical-align: top;
            box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .radio .radio-on {
            display: none;
        }
        .radio input:checked + span.radio-on {
            width: 10px;
            height: 10px;
            position: absolute;
            border-radius: 100%;
            .........完整代码请登录后点击上方下载按钮下载查看