magnifying-glass

{"html":"","css":".search {\n flex: 0 0 90%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.search__input {\n font-family: \"Open Sans\", sans-serif;\n font-size: 17px;\n color: #333333;\n background-color: #f4f2f2;\n border: none;\n padding: 14px 72px 14px 42px;\n border-radius: 1000px;\n width: 94%;\n margin-left: -34px;\n margin-right: -66px;\n transition: all 0.2s;\n}\n\n.search__input:focus {\n outline: none;\n width: 100%;\n background-color: #f0eeee;\n}\n\n.search__input::-webkit-input-placeholder {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 5px;\n font-weight: 500;\n color: #999999;\n}\n\n.search__button {\n border: none;\n background-color: transparent;\n z-index: 999;\n cursor: pointer;\n}\n\n.search__button:focus {\n outline: none;\n}\n\n.search__button:active {\n transform: translateY(2px);\n}\n\n.search__icon {\n height: 20px;\n width: 20px;\n fill: #999999;\n}\n\n.mic__button {\n border: none;\n background-color: transparent;\n margin-right: 10px;\n cursor: pointer;\n}\n\n.mic__button:focus {\n outline: none;\n}\n\n.mic__button:active {\n transform: translateY(2px);\n}\n\n.mic__icon {\n height: 28px;\n width: 20px;\n fill: #999999;\n}\n\n.mic__icon:hover {\n fill: #dd5e89;\n}\n\n.picture__button {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n.picture__button:focus {\n outline: none;\n}\n\n.picture__button:active {\n transform: translateY(2px);\n}\n\n.picture__icon {\n height: 16px;\n width: 20px;\n fill: #999999;\n}\n\n.picture__icon:hover {\n fill: #dd5e89;\n}\n"}

gentle-yak-43

👁 实时预览

📝 源代码