Search

{"html":"

\n \n

","css":".container {\n position: relative;\n --size-button: 40px;\n color: white;\n}\n\n.input {\n padding-left: var(--size-button);\n height: var(--size-button);\n font-size: 15px;\n border: none;\n color: #fff;\n outline: none;\n width: var(--size-button);\n transition: all ease 0.3s;\n background-color: #191A1E;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n border-radius: 50px;\n cursor: pointer;\n}\n\n.input:focus,\n.input:not(:invalid) {\n width: 200px;\n cursor: text;\n box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;\n}\n\n.input:focus + .icon,\n.input:not(:invalid) + .icon {\n pointer-events: all;\n cursor: pointer;\n}\n\n.container .icon {\n position: absolute;\n width: var(--size-button);\n height: var(--size-button);\n top: 0;\n left: 0;\n padding: 8px;\n pointer-events: none;\n}\n\n.container .icon svg {\n width: 100%;\n height: 100%;\n}"}

splendid-starfish-73

👁 实时预览

📝 源代码