div+css美化radio实现点击切换背景颜色效果代码-html代码-BFW代码库

div+css美化radio实现点击切换背景颜色效果代码

代码语言：html

代码描述：div+css美化radio实现点击切换背景颜色效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
    	height:100%;
    	font-family:monospace;
    	margin:0;
    	padding:0;
    }
    .container {
    	width:100%;
    	height:100%;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    }
    .source {
    	position:fixed;
    	right:2rem;
    	bottom:2rem;
    }
    .source a {
    	color:#fff;
    	text-decoration:none;
    }
    .source a span {
    	opacity:0.32;
    }
    .phone {
    	display:flex;
    	width:25em;
    	height:25em;
    	background-color:#f3f3f3;
    	border-radius:32px;
    	overflow:hidden;
    }
    .phone-footer {
    	display:flex;
    	justify-content:center;
    	align-items:center;
    	width:100%;
    	height:6em;
    	padding-left:2em;
    	padding-right:2em;
    	background-color:#fff;
    	margin-top:auto;
    }
    .nav {
    	display:flex;
    	width:100%;
    	justify-content:space-between;
    }
    .nav-item {
    	position:relative;
    	display:flex;
    	padding:8px;
    	border-radius:16px;
    }
    .nav-item:nth-child(1) {
    	background-color:#e8e2f6;
    }
    .nav-item:nth-child(1) label {
    	background-color:#5b37b7;
    }
    .nav-item:nth-child(1) span {
    	color:#5b37b7;
    }
    .nav-item:nth-child(1) span:before {
    	background-color:#5b37b7;
    }
    .nav-item:nth-child(2) {
    	background-color:#f6e3f1;
    }
    .nav-item:nth-child(2) label {
    	background-color:#b73892;
    }
    .nav-item:nth-child(2) span {
    	color:#b73892;
    }
    .nav-item:nth-child(2) span:before {
    	background-color:#b73892;
    }
    .nav-item:nth-child(3) {
    	background-color:#fff3d9;
    }
    .nav-item:nth-child(3) label {
    	background-color:#eda600;
    }
    .nav-item:nth-child(3) span {
    	color:#eda600;
    }
    .nav-item:nth-child(3) span:before {
    	background-color:#eda600;
    }
    .nav-item:nth-child(4) {
    	background-color:#afedf7;
    }
    .nav-item:nth-child(4) label {
    	background-color:#1194aa;
    }
    .nav-item:nth-child(4) span {
    	color:#1194aa;
    }
    .nav-item:nth-child(4) span:before {
    	background-color:#1194aa;
    }
    .nav-item * {
    	cursor:pointer;
    }
    .nav-item label {
    	position:relative;
    	display:inline-block;
    	width:1em;
    	height:1em;
    	background-color:inherit;
    	border-radius:50%;
    }
    .nav-item label:before {
    	content:"";
    	position:absolute;
    	top:-100%;
    	left:-100%;
    	width:300%;
    	height:300%;
    	bac.........完整代码请登录后点击上方下载按钮下载查看