{"html":"

\n \n \n

","css":".radio-input {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: 10px;\n width: 150px;\n height: 50px;\n cursor: pointer;\n}\n\n.radio-input .input {\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n cursor: pointer;\n z-index: 10;\n opacity: 0;\n}\n\n.radio-input .span {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n background: #323232;\n border-radius: 10px;\n}\n\n.radio-input .span::before {\n content: 'Inactive';\n position: absolute;\n top: 3px;\n left: 3px;\n width: calc(100% - 6px);\n height: calc(100% - 6px);\n border-radius: 8px;\n background: #666666;\n box-shadow: inset -6px -6px 12px #2c2c2c,\n inset 6px 6px 12px #a0a0a0;\n color: #323232;\n font-weight: 700;\n font-size: 17px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.input:checked ~ .span::before {\n content: 'Active';\n color: #ccc;\n text-shadow: 1px 1px 0.5px rgba(0,255,0,0.3);\n ;\n border-radius: 8px;\n background: #666666;\n box-shadow: inset 6px 6px 12px #2c2c2c,\n inset -6px -6px 12px #a0a0a0;\n}\n\n.radio-input .span::after {\n content: '';\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: red;\n position: absolute;\n top: calc(50% - 3px);\n right: 20px;\n box-shadow: 1px 1px 3px #9c0000,\n -1px -1px 3px #ff0000;\n}\n\n.input:checked ~ .span::after {\n background: #00ff00;\n box-shadow: 1px 1px 3px #009c00,\n -1px -1px 3px #00ff00;\n}"}

spicy-fish-10

👁 实时预览

📝 源代码