WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Barre de recherche CSS
6398
webleb
Publiez votre code
Recommandé
27 May 2025
Carte de paiement
16 August 2024
Boutique de jetons Discord
18 June 2023
Formulaire de connexion simple
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