WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Search Bar
5982
webleb
Publish Your Code
Recommended
11 September 2023
CSS Social Icons
15 September 2025
CSS Thought Bubble Animation
2 March 2024
HTML CSS Contact Form
index.html
Copy
Webleb
Search
styles.css
Copy
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } body, button, input { font: 1em Hind, sans-serif; line-height: 1.5em; } body, .bar { display: flex; } body { background: #f1f1f1; height: 100vh; } .bar input, .search-btn, .search-btn:before, .search-btn:after { transition: all 0.25s ease-out; } .bar input, .search-btn { width: 3em; height: 3em; } .bar input:invalid:not(:focus), .search-btn { cursor: pointer; } .bar, .bar input:focus, .bar input:valid { width: 100%; } .bar input:focus, .bar input:not(:focus) + .search-btn:focus { outline: transparent; } .bar { margin: auto; padding: 1.5em; justify-content: center; max-width: 30em; } .bar input { background: transparent; border-radius: 1.5em; box-shadow: 0 0 0 0.4em #171717 inset; padding: 0.75em; transform: translate(0.5em,0.5em) scale(0.5); transform-origin: 100% 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .bar input::-webkit-search-decoration { -webkit-appearance: none; } .bar input:focus, .bar input:valid { background: #fff; border-radius: 0.375em 0 0 0.375em; box-shadow: 0 0 0 0.1em #d9d9d9 inset; transform: scale(1); } .search-btn { background: #171717; border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0; padding: 0.75em; position: relative; transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125); transform-origin: 0 50%; } .search-btn:before, .search-btn:after { content: ""; display: block; opacity: 0; position: absolute; } .search-btn:before { border-radius: 50%; box-shadow: 0 0 0 0.2em #f1f1f1 inset; top: 0.75em; left: 0.75em; width: 1.2em; height: 1.2em; } .search-btn:after { background: #f1f1f1; border-radius: 0 0.25em 0.25em 0; top: 51%; left: 51%; width: 0.75em; height: 0.25em; transform: translate(0.2em,0) rotate(45deg); transform-origin: 0 50%; } .search-btn span { display: inline-block; overflow: hidden; width: 1px; height: 1px; } .bar input:focus + .search-btn, .bar input:valid + .search-btn { background: #7e7e7e; border-radius: 0 0.375em 0.375em 0; transform: scale(1); } .bar input:focus + .search-btn:before, .bar input:focus + .search-btn:after, .bar input:valid + .search-btn:before, .bar input:valid + .search-btn:after { opacity: 1; } .bar input:focus + .search-btn:hover, .bar input:valid + .search-btn:hover, .bar input:valid:not(:focus) + .search-btn:focus { background: #7e7e7e; } .bar input:focus + .search-btn:active, .bar input:valid + .search-btn:active { transform: translateY(1px); } @media screen and (prefers-color-scheme: dark) { body, input { color: #f1f1f1; } body { background: #171717; } .bar input { box-shadow: 0 0 0 0.4em #f1f1f1 inset; } .bar input:focus, .bar input:valid { background: #3d3d3d; box-shadow: 0 0 0 0.1em #3d3d3d inset; } .search-btn { background: #f1f1f1; } }
main.js
Copy
// Nothing To Copy