{"html":"\n","css":".dropdown {\n border: 1px solid #c1c2c5;\n border-radius: 12px;\n transition: all 300ms;\n display: flex;\n flex-direction: column;\n min-height: 58px;\n background-color: white;\n overflow: hidden;\n position: relative;\n inset-inline: auto;\n max-width: 298px;\n min-width: 298px;\n}\n.dropdown input:where(:checked) ~ .list {\n opacity: 1;\n transform: translateY(-3rem) scale(1);\n transition: all 500ms ease;\n margin-top: 32px;\n padding-top: 4px;\n margin-bottom: -32px;\n}\n.dropdown input:where(:not(:checked)) ~ .list {\n opacity: 0;\n transform: translateY(3rem);\n margin-top: -100%;\n user-select: none;\n height: 0px;\n max-height: 0px;\n min-height: 0px;\n pointer-events: none;\n transition: all 500ms ease-out;\n}\n.trigger {\n cursor: pointer;\n list-style: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n font-weight: 600;\n color: inherit;\n width: 100%;\n display: flex;\n align-items: center;\n flex-flow: row;\n gap: 1rem;\n padding: 1rem;\n height: max-content;\n position: relative;\n z-index: 99;\n border-radius: inherit;\n background-color: white;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.dropdown input:where(:checked) + .trigger {\n margin-bottom: 1rem;\n}\n.dropdown input:where(:checked) + .trigger:before {\n rotate: 90deg;\n transition-delay: 0ms;\n}\n.dropdown input:where(:checked) + .trigger::after {\n content: \"Close Dropdown\";\n}\n\n.trigger:before,\n.trigger::after {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.trigger:before {\n content: \"›\";\n rotate: -90deg;\n width: 17px;\n height: 17px;\n color: #262626;\n border-radius: 2px;\n font-size: 26px;\n transition: all 350ms ease;\n transition-delay: 85ms;\n}\n.trigger::after {\n content: \"Open Dropdown\";\n}\n.list {\n height: 100%;\n max-height: 20rem;\n width: calc(100% - calc(var(--w-scrollbar) / 2));\n display: grid;\n grid-auto-flow: row;\n overflow: hidden auto;\n gap: 1rem;\n padding: 0 1rem;\n margin-right: -8px;\n --w-scrollbar: 8px;\n}\n.listitem {\n height: 100%;\n width: calc(100% + calc(calc(var(--w-scrollbar) / 2) + var(--w-scrollbar)));\n list-style: none;\n}\n.article {\n padding: 1rem;\n border-radius: 8px;\n font-size: 15px;\n font-weight: 500;\n text-align: justify;\n width: 100%;\n border: 1px solid #c1c2c5;\n display: inline-block;\n background-color: white;\n}\n\n.webkit-scrollbar::-webkit-scrollbar {\n width: var(--w-scrollbar);\n height: var(--w-scrollbar);\n border-radius: 9999px;\n}\n.webkit-scrollbar::-webkit-scrollbar-track {\n background: #0000;\n}\n.webkit-scrollbar::-webkit-scrollbar-thumb {\n background: #0000;\n border-radius: 9999px;\n}\n.webkit-scrollbar:hover::-webkit-scrollbar-thumb {\n background: #c1c2c5;\n}\n"}

curvy-newt-49

👁 实时预览

📝 源代码