WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Barra de búsqueda con CSS
5985
webleb
Publica tu código
Recomendado
14 June 2024
Tarjeta animada de redes sociales.
12 July 2025
Encabezado fijo controlado por desplazamiento
5 August 2025
El algoritmo de sobrecarga
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