jquery inpitassembly单选复选美化效果代码-html代码-BFW代码库

jquery inpitassembly单选复选美化效果代码

代码语言：html

代码描述：jquery inpitassembly单选复选美化效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
            body,
        html {
        	margin: 0;
        	height: 100%
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        p {
        	margin: 10px 0;
        	color: inherit
        }
        
        pre {
        	position: relative;
        	padding: 0 !important;
        	margin: 0
        }
        
        code {
        	padding: 0 30px !important
        }
        
        pre h2 {
        	position: absolute;
        	top: 30px;
        	padding: 3px 20px;
        	right: 0;
        	color: #ffffff;
        	background-color: #9c56f1
        }
        
        hr {
        	background-color: #d2d2d2;
        	margin: 10px 0;
        	border: 0;
        	height: 1px
        }
        
        table,
        td,
        th,
        tr {
        	border: 0.5px solid #c392ff;
        	margin: 30px 0;
        	background-color: #e6d2ff;
        	color: #602aa0;
        }
        th {
            white-space: pre;
        }
        
        td,
        th {
        	padding: 10px
        }
        
        a,
        a:hover,
        a:visited {
        	color: #222
        }
        
        *[disabled] {
        	opacity: 0.3;
        	cursor: no-drop !important
        }
        *[formname] {
        	margin: 0 0 50px 0;
        }
        .logo {
            position: absolute;
            right: -80px;
            top: -10px;
            transform: rotate(45deg);
            background-color: rgb(156, 86, 241);
            text-align: center;
            padding: 20px 0 0 0;
            width: 200px;
            height: 55px;
        }
        .logo > a {
        	transform: rotate(-45deg);
            display: block;
        }
        
        .inpit .li>div[name][value]:hover {
        	border: 2px dashed #9c56f1;
        	background-color: rgba(156, 86, 241, 0.1)
        }
        
        .inpit {
        	background-color: #9c56f1;
        	position: relative;
        	height: 100%
        }
        
        .inpit .li {
        	margin: 0 auto;
        	min-width: 200px;
        	padding: 20px 0;
        	display: flow-root
        }
        
        .inpit .li>div[name][value],
        .inpit .li>div.add {
        	cursor: pointer;
        	transition: transform 0.2s ease-in, box-shadow 0.2s ease-out;
        	width: calc(25% - 64px);
        	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
        	float: left;
        	background-color: #fff;
        	padding: 10px 20px;
        	border: 2px dashed #dcdcdc;
        	border-radius: 4px;
        	margin: 0 10px 20px
        }
        
        .inpit .li>div.ack[name][value],
        .inpit .li>div.active[name][value]{
        	box-shadow: 0 3px 20px rgba(156, 86, 241, 0.43);
        	transform: scale(1.05);
        	border: 2px solid #9c56f1;
        	background-color: #9c56f1;
        	color: #fff;
        	animation: scales 0.3s
        }
        
        @keyframes scales {
        	0% {
        		transform: scale(1)
        	}
        	50% {
        		transform: scale(1.25)
        	}
        	100% {
        		transform: scale(1)
        	}
        }
        
        .inpit>div {
        	position: relative;
        	overflow: hidden;
        	width: 800px;
        	display: flow-root;
        	background-color: #fff;
        	padding: 10px 30px 50px 30px;
        	margin: 0 auto
        }
        
        .inpit button,
        .inpit .insideonelist {
        	background-color: rgb(156, 86, 241);
        	border-radius: 50px;
        	font-size: 20px;
        	color: #fff;
        	width: 100%;
        	max-width: 400px;
        	margin: 10px auto;
        	border: #000000;
        	padding: 10px 0;
        	text-align: center;
        	display: block;
        	cursor: pointer
        }
        
        .inpit .flex>div {
        	float: left;
        	width: 40%;
        	margin: 0 5% 40px
        }
        
        .inpit .flex .li>div {
        	width: calc(50% - 64px) !important
        }
        
        .inpit .style_a {
        	position: relative;
        	overflow: hidden
        }
        
        .inpit .style_a:before {
        	content: "VIP";
        	position: absolute;
        	top: 0;
        	right: 0;
        	background-color: #f00;
        	color: #fff;
        	padding: 3px 10px;
        	font-size: 12px
        }
        
        .inpit .style_b.ack {
        	background: -moz-linear-gradient(top, #9C27B0, rgba(0, 0, 255, 0.5));
        	backgrou.........完整代码请登录后点击上方下载按钮下载查看