{"html":"

\n \n \n \n \n \n \n\n \n \n \n \n \n \n

\n","css":".div {\n --field-size: 50px;\n --field-border-color: #ccc;\n margin: 0 auto;\n font-size: 1rem;\n box-shadow:\n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n background: #ffffff;\n border-radius: 5px;\n position: relative;\n width: 300px;\n overflow: hidden;\n display: flex;\n background: white;\n}\n\n.div input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: var(--field-size);\n height: var(--field-size);\n cursor: pointer;\n padding: 0;\n margin: 0;\n}\n\n.div input[type=\"checkbox\"]:hover + span .svgi {\n display: none;\n /* Remove the background image */\n}\n.div input[type=\"checkbox\"]:hover + span .svgii {\n display: block;\n}\n\n.div input[type=\"checkbox\"]:checked + span .svgi {\n display: none; /* Remove the background image */\n}\n\n.div input[type=\"checkbox\"]:checked + span .svgii {\n display: block;\n}\n\n.div input[type=\"checkbox\"]:checked + span::before,\n.div input[type=\"checkbox\"]:checked + span::after {\n pointer-events: none;\n}\n\n.div input[type=\"checkbox\"]:checked + span::after {\n transform: translateY(-100%);\n}\n\n.div input[type=\"checkbox\"]:checked + span::before {\n transform: translateY(100%);\n}\n.div input[type=\"checkbox\"] + span .svgii {\n display: none;\n}\n.div input[type=\"checkbox\"] + span,\n.svgi,\n.svgii {\n width: var(--field-size);\n height: var(--field-size);\n padding: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n border-right: 1px solid var(--field-border-color);\n cursor: pointer;\n}\n\n.div input[type=\"checkbox\"] + span::after,\n.div input[type=\"checkbox\"] + span::before {\n content: \"\";\n position: absolute;\n right: 0;\n height: 50%;\n left: var(--field-size);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n background: rgba(0, 0, 0, 0.075);\n z-index: 2;\n cursor: not-allowed;\n}\n\n.div input[type=\"checkbox\"] + span::after {\n top: 0;\n}\n\n.div input[type=\"checkbox\"] + span::before {\n bottom: 0;\n}\n\n.div input[type=\"text\"] {\n padding: 1em;\n border: 0;\n flex: 1;\n font-size: 1rem;\n --placeholder-color: #ababab;\n font-family: inherit;\n}\n\n.div input[type=\"text\"]::-webkit-input-placeholder {\n color: var(--placeholder-color);\n}\n\n.div input[type=\"text\"]:-ms-input-placeholder {\n color: var(--placeholder-color);\n}\n\n.div input[type=\"text\"]::-moz-placeholder {\n color: var(--placeholder-color);\n}\n\n.div input[type=\"text\"]:-moz-placeholder {\n color: var(--placeholder-color);\n}\n"}

afraid-rattlesnake-2

👁 实时预览

📝 源代码