{"html":"","css":"/* this is a recreation of twitter search in css */\n.form {\n --input-text-color: #fff;\n --input-bg-color: #283542;\n --focus-input-bg-color: transparent;\n --text-color: #949faa;\n --active-color: #1b9bee;\n --width-of-input: 200px;\n --inline-padding-of-input: 1.2em;\n --gap: 0.9rem;\n}\n/* form style */\n.form {\n font-size: 0.9rem;\n display: flex;\n gap: 0.5rem;\n align-items: center;\n width: var(--width-of-input);\n position: relative;\n isolation: isolate;\n}\n/* a fancy bg for showing background and border when focus. */\n.fancy-bg {\n position: absolute;\n width: 100%;\n inset: 0;\n background: var(--input-bg-color);\n border-radius: 30px;\n height: 100%;\n z-index: -1;\n pointer-events: none;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n/* label styling */\nlabel {\n width: 100%;\n padding: 0.8em;\n height: 40px;\n padding-inline: var(--inline-padding-of-input);\n display: flex;\n align-items: center;\n}\n\n.search,.close-btn {\n position: absolute;\n}\n/* styling search-icon */\n.search {\n fill: var(--text-color);\n left: var(--inline-padding-of-input);\n}\n/* svg -- size */\nsvg {\n width: 17px;\n display: block;\n}\n/* styling of close button */\n.close-btn {\n border: none;\n right: var(--inline-padding-of-input);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n padding: 0.1em;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--active-color);\n opacity: 0;\n visibility: hidden;\n}\n/* styling of input */\n.input {\n color: var(--input-text-color);\n width: 100%;\n margin-inline: min(2em,calc(var(--inline-padding-of-input) + var(--gap)));\n background: none;\n border: none;\n}\n\n.input:focus {\n outline: none;\n}\n\n.input::placeholder {\n color: var(--text-color)\n}\n/* input background change in focus */\n.input:focus ~ .fancy-bg {\n border: 1px solid var(--active-color);\n background: var(--focus-input-bg-color);\n}\n/* search icon color change in focus */\n.input:focus ~ .search {\n fill: var(--active-color);\n}\n/* showing close button when typing */\n.input:valid ~ .close-btn {\n opacity: 1;\n visibility: visible;\n}\n/* this is for the default background in input,when selecting autofill options -- you can remove this code if you do not want to override the browser style. */\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-transition: \"color 9999s ease-out, background-color 9999s ease-out\";\n -webkit-transition-delay: 9999s;\n}"}

tasty-dingo-5

👁 实时预览

📝 源代码