{"html":"

\n \n \n \n \n

\n \n \n

\n\n","css":".select {\n width: fit-content;\n cursor: pointer;\n position: relative;\n transition: 300ms;\n color: white;\n overflow: hidden;\n}\n\n.selected {\n background-color: #2a2f3b;\n padding: 5px;\n margin-bottom: 3px;\n border-radius: 5px;\n position: relative;\n z-index: 100000;\n font-size: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.arrow {\n position: relative;\n right: 0px;\n height: 10px;\n transform: rotate(-90deg);\n width: 25px;\n fill: white;\n z-index: 100000;\n transition: 300ms;\n}\n\n.options {\n display: flex;\n flex-direction: column;\n border-radius: 5px;\n padding: 5px;\n background-color: #2a2f3b;\n position: relative;\n top: -100px;\n opacity: 0;\n transition: 300ms;\n}\n\n.select:hover > .options {\n opacity: 1;\n top: 0;\n}\n\n.select:hover > .selected .arrow {\n transform: rotate(0deg);\n}\n\n.option {\n border-radius: 5px;\n padding: 5px;\n transition: 300ms;\n background-color: #2a2f3b;\n width: 150px;\n font-size: 15px;\n}\n.option:hover {\n background-color: #323741;\n}\n\n.options input[type=\"radio\"] {\n display: none;\n}\n\n.options label {\n display: inline-block;\n}\n.options label::before {\n content: attr(data-txt);\n}\n\n.options input[type=\"radio\"]:checked + label {\n display: none;\n}\n\n.options input[type=\"radio\"]#all:checked + label {\n display: none;\n}\n\n.select:has(.options input[type=\"radio\"]#all:checked) .selected::before {\n content: attr(data-default);\n}\n.select:has(.options input[type=\"radio\"]#option-1:checked) .selected::before {\n content: attr(data-one);\n}\n.select:has(.options input[type=\"radio\"]#option-2:checked) .selected::before {\n content: attr(data-two);\n}\n.select:has(.options input[type=\"radio\"]#option-3:checked) .selected::before {\n content: attr(data-three);\n}\n"}

gentle-vampirebat-46

👁 实时预览

📝 源代码