Barre de recherche CSS

5720 webleb

Publiez votre code

Recommandé

14 January 2025

Exemple de page Web de portfolio

10 September 2024

salle de sport

index.html

styles.css

* {
	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;
	}
}

Barre de recherche CSS

Recommandé

Exemple de page Web de portfolio

Formulaire de connexion Panda

salle de sport

index.html

styles.css

main.js

Recommandé

Exemple de page Web de portfolio

Formulaire de connexion Panda

salle de sport

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js