{"html":"

\n \n \n Bring\n \n \n \n Me\n \n \n \n Back\n \n \n \n The\n \n \n \n Memories\n \n

\n","css":".radio-input {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.radio-input label {\n display: inline-flex;\n align-items: center;\n font:\n 9pt \"Segoe UI\",\n SegoeUI,\n \"Noto Sans\",\n sans-serif;\n position: relative;\n margin-left: 20px;\n cursor: pointer;\n}\n\n.radio-input input {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background: none;\n border: none;\n margin: 0;\n opacity: 0;\n}\n\n.radio-input label span {\n position: relative;\n}\n\n.radio-input label::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -20px;\n display: inline-block;\n width: 14px;\n height: 14px;\n background: #f6f6f6;\n border: 1px solid #8e8f8f;\n border-radius: 50%;\n box-sizing: border-box;\n box-shadow:\n inset 0 0 0 1.5px #f4f4f4,\n inset 1px 1px 0 1.5px #aeaeae,\n inset -1px 0 0 1.5px #ddd,\n inset 3px 3px 6px #ccc;\n transition: 0.4s;\n}\n\n.radio-input label:hover::before {\n border-color: #3c7fb1;\n box-shadow:\n inset 0 0 0 1.5px #def9fa,\n inset 1px 1px 0 1.5px #79c6f9,\n inset -1px -1px 0 1.5px #c6e9fc,\n inset 3px 3px 6px #b1dffd;\n}\n\n.radio-input input:checked + span::after {\n content: \"\";\n position: absolute;\n top: 3px;\n left: -17px;\n display: block;\n width: 8px;\n height: 8px;\n background: #7cd3eb;\n border: 1.5px solid #27506d;\n border-radius: 50%;\n box-sizing: border-box;\n box-shadow:\n inset -1px -1px 0 0.5px #16638f,\n inset -1px -1px 0 1px #1985c0;\n}\n\n.radio-input input:focus-visible + span {\n outline: 1px dotted #000;\n}\n\n.radio-input input:disabled + span {\n filter: grayscale(1);\n opacity: 0.6;\n}\n\n.radio-input input:disabled:not(:checked) + span::before {\n opacity: 0.5;\n}\n"}

weak-badger-55

👁 实时预览

📝 源代码