検索ボックス

ルール・連絡事項

ホットワード・価格表示が不要な場合は省いて使用できる

パーツ設置費用

3,000円

CSS

.main__search .search__form {
	position: relative;
}
.main__search .search__form .searchTxt {
	background: url("https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/04/search_btn_2.png") no-repeat 20px 50% / 30px;
	background-color: #f2f2f2;
	border: none;
	border-radius: 30px 0 0 30px;
	font-size: 15px;
	image-rendering: -webkit-optimize-contrast;
	margin: 0;
	padding: 0 20px 0 70px;
	height: 60px;
	width: calc(100% - 120px);
}
.main__search .search__form .border {
	border-left: solid 1px #ccc;
	position: absolute;
	right: 120px;
	top: 50%;
	transform: translateY(-50%);
	height: 25px;
}
.main__search .search__form .searchBtn {
	background-color: #f2f2f2;
	border: none;
	border-radius: 0 30px 30px 0;
	color: #000000;
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	width: 120px;
}

.main__search .search__form + .keyword {
	margin-top: 40px;
}
.main__search .keyword {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 -10px;
}
.main__search .keyword p {
	border: solid 1px #ccc;
	margin: 0 10px 15px;
}
.main__search .keyword p + p {
	margin-left: 20px;
}
.main__search .keyword p a {
	display: block;
	padding: 8px 60px;
}
.main__search .keyword p a:hover {
	background-color: #f2f2f2;
	color: #000;
}

.main__search .price {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 -10px;
}
.main__search .price p {
	border: solid 1px #ccc;
	margin: 0 10px 15px;
}
.main__search .price p a {
	display: block;
	padding: 8px 35px;
}
.main__search .price p a:hover {
	background-color: #f2f2f2;
	color: #000;
}
@media screen and (max-width: 800px) {
	.main__search .keyword {
		margin: 0 -1vw;
	}
	.main__search .search__form + .keyword {
		margin-top: 5vw;
	}
	.main__search .keyword p {
		margin: 0 1vw 2vw;
	}
	.main__search .keyword p + p {
		margin-left: 2vw;
	}
	.main__search .keyword p a {
		padding: 8px 2vw;
	}
	
	.main__search .price {
		margin: 0 -1vw;
	}
	.main__search .price p {
		margin: 0 1vw 2vw;
	}
	.main__search .price p a {
		padding: 8px 2vw;
	}
}
@media screen and (max-width: 540px) {
	.main__search .search__form .searchTxt {
		background-position: 3vw 50%;
		background-size: 6vw;
		font-size: 3.6vw;
		padding-left: 12vw;
		height: 14vw;
		width: calc(100% - 24vw);
	}
	.main__search .search__form .searchBtn {
		font-size: 3.6vw;
		width: 24vw;
	}
	.main__search .search__form .border {
		right: 24vw;
	}
	
	.main__search .keyword {
		margin: 0 -1vw;
	}
	.main__search .search__form + .keyword {
		margin-top: 5vw;
	}
	.main__search .keyword p {
		margin: 0 1vw 3vw;
	}
	.main__search .keyword p + p {
		margin-left: 2vw;
	}
	.main__search .keyword p a {
		padding: 2vw 2vw;
	}
	
	.main__search .price {
		margin: 0 -1vw;
	}
	.main__search .price p {
		margin: 0 1vw 3vw;
	}
	.main__search .price p a {
		padding: 2vw 3vw;
	}
}

HTML

<section class="main__search">
	<form class="flexBox search__form" method="get" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc">
		<input name="sv" type="hidden" value="6">
		<input name="sid" type="hidden" value="店舗ID">
		<input name="su" type="hidden" value="店舗URL">
		<input name="sn" type="hidden" value="店舗名">
		<input name="f" type="hidden" value="A">
		<input class="searchTxt" name="sitem" type="text" placeholder="キーワードで商品を検索する">
		<p class="border"></p>
		<input class="searchBtn" type="submit" value="SEARCH">
	</form>
	<div class="flexBox keyword">
		<p><a href="">ほっとワード</a></p>
		<p><a href="">ほっとワード</a></p>
		<p><a href="">ほっとワード</a></p>
	</div>
	<div class="flexBox price">
		<p><a href="">～ 00,000円</a></p>
		<p><a href="">00,000円 ～ 00,000円</a></p>
		<p><a href="">00,000円 ～ 00,000円</a></p>
		<p><a href="">000,000円 ～</a></p>
	</div>
</section>