HomeHTML & CSS4 Stylish Search Box Design in HTML and CSS

4 Stylish Search Box Design in HTML and CSS

search box

4 search box designs using HTML and CSS

A search box is a very useful graphical section that presents in every webpage from the website operators. It works as the assistant for some search data input or term from the site used to search and extract related data or queries from the website database. A simple search bar can be created using HTML, CSS, and JS code only. Php and ajax can be used to make search bar more functional and live search feature. 

As you can on the above-given image, there are four stylish and Beautiful Search Box Designs in HTML & CSS. All search boxes have different designs. The first search bar has a search icon button on the left side. The second search bar has a circle search icon button on the right side. The third search bar also has a right-side search icon button. Currently, the search icon button color is black.

The color of the search icon button easily can be in a CSS file. In the below-given HTML code, the search_wrap class is representing each search box. there are four different search wrap classes for four different search boxes. the search box is very important for the SEO of any website.in blogging, the search box is a very compulsory element of any webpage. The user just needs to add require query or data in the search box and it will appear with the help of only search box.

4 Search Box Designs in HTML & CSS (Source Code)

First of all, you need to create two coding Files for the program(4 Search Box Design using HTML & CSS). After creating these files just paste the following below given codes in your newly created coding files.

First, create an HTML file with the name of index.html or search.html and paste the below-given codes in your HTML(Hypertext Markup Language) file. Remember here, you’ve to generate a file with a .html extension.

Second, create a CSS(Cascading Style Sheet) file with the name of style.css and paste the given codes in your CSS file. Also, remember that you’ve to create a file with a .css file extension.

HTML:

      <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<div class="wrapper">
	<div class="header">
		<p>4 Search Box Designs In HTML & CSS</p>
	</div>

	<div class="container">
		<div class="search_wrap search_wrap_01">
			<div class="search_box">
				<div class="btn btn_common">
					<i class="fas fa-search"></i>
				</div>
				<input type="text" class="input" placeholder="search...">
			</div>
		</div>
		<div class="search_wrap search_wrap_02">
			<div class="search_box">
				<input type="text" class="input" placeholder="search...">
				<div class="btn btn_common">
					<i class="fas fa-search"></i>
				</div>
			</div>
		</div>
		<div class="search_wrap search_wrap_03">
			<div class="search_box">
				<input type="text" class="input" placeholder="search...">
				<div class="btn">
					<p>Search</p>
				</div>
			</div>
		</div>
		<div class="search_wrap search_wrap_04">
			<div class="search_box">
				<input type="text" class="input" placeholder="search...">
				<div class="btn">
					<p>Search</p>
				</div>
			</div>
		</div>
	</div>
</div>

CSS:

      @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Noto Sans KR', sans-serif;
}

body{
	background: #de1b1b;
}

.header{
	width: 800px;
	padding: 10px;
	background: #000000;
	margin: 5px auto;
	border-radius: 5px;
	text-align: center;
}

.header p{
	font-size: 35px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
}

.container .input{
	border: 0;
	outline: none;
	color: #8b7d77;
}

.search_wrap{
	width: 500px;
	margin: 38px auto;
}

.search_wrap .search_box{
	position: relative;
	width: 500px;
	height: 60px;
}

.search_wrap .search_box .input{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 10px 20px;
	border-radius: 3px;
	font-size: 18px;
}

.search_wrap .search_box .btn{
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 100%;
	background: #000000;
	z-index: 1;
	cursor: pointer;
}

.search_wrap .search_box .btn:hover{
	background: #de1b1b;	
}

.search_wrap .search_box .btn.btn_common .fas{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 20px;
}

.search_wrap .search_box .btn{
	right: 0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.search_wrap .search_box .input,
.search_wrap.search_wrap_02 .search_box .input{
	padding-right: 80px;
}

.search_wrap.search_wrap_01 .search_box .btn{
	left: 0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.search_wrap.search_wrap_01 .search_box .input{
	padding-left: 80px;
}

.search_wrap.search_wrap_02 .search_box .input,
.search_wrap.search_wrap_04 .search_box .input{
	border-radius: 50px;
}

.search_wrap.search_wrap_02 .search_box .btn{
	right: 0px;
	border-radius: 50%;
}
.search_wrap.search_wrap_04 .search_box .btn,
.search_wrap.search_wrap_03 .search_box .btn{
	width: 125px;
	height: 45px;
	top: 8px;
	right: 5px;
	border-radius: 3px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search_wrap.search_wrap_04 .search_box .btn{
	border-radius: 25px;
}


.search_wrap.search_wrap_03 .search_box .input,
.search_wrap.search_wrap_04 .search_box .input{
	padding-right: 145px;
}
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

All Categories

Most Popular