{"html":"

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

\n","css":".checkbox-container-single {\n display: inline-block;\n vertical-align: middle;\n}\n\n.hidden-checkbox {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.custom-checkbox-visual-only {\n position: relative;\n display: inline-flex;\n cursor: pointer;\n user-select: none;\n}\n\n.checkbox-box {\n width: 30px;\n height: 30px;\n border: 2px solid #adb5bd;\n border-radius: 6px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n background-color: #fff;\n transition:\n border-color 0.3s ease,\n background-color 0.3s ease;\n}\n\n.checkmark {\n width: 22px;\n height: 22px;\n stroke-width: 4;\n stroke: white;\n stroke-miterlimit: 10;\n opacity: 0;\n transform: scale(0.5);\n transition:\n opacity 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28),\n transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n}\n\n.checkmark-circle {\n stroke-dasharray: 166;\n stroke-dashoffset: 166;\n stroke-width: 3;\n stroke-miterlimit: 10;\n stroke: #4caf50;\n fill: none;\n transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.45, 1);\n}\n\n.checkmark-check {\n transform-origin: 50% 50%;\n stroke-dasharray: 48;\n stroke-dashoffset: 48;\n transition: stroke-dashoffset 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.3s;\n}\n\n.hidden-checkbox:checked + .custom-checkbox-visual-only .checkbox-box {\n background-color: #4caf50;\n border-color: #4caf50;\n}\n\n.hidden-checkbox:checked + .custom-checkbox-visual-only .checkmark {\n opacity: 1;\n transform: scale(1);\n}\n\n.hidden-checkbox:checked + .custom-checkbox-visual-only .checkmark-circle {\n stroke-dashoffset: 0;\n}\n\n.hidden-checkbox:checked + .custom-checkbox-visual-only .checkmark-check {\n stroke-dashoffset: 0;\n}\n\n.custom-checkbox-visual-only:hover .checkbox-box {\n border-color: #67bd6a;\n}\n\n.hidden-checkbox:focus + .custom-checkbox-visual-only .checkbox-box {\n box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);\n border-color: #4caf50;\n}\n"}

polite-warthog-13

👁 实时预览

📝 源代码