Hello folks! Today, let’s craft something awesome – a stylish Search Bar using just HTML and CSS. It’s a simple yet effective way to enhance the user experience on your website.
Whether you’re a coding enthusiast or a beginner, this tutorial is a great opportunity to dive into the basics of HTML and CSS while creating a useful element for your web projects.
No need for complexity here – just clean coding to build a sleek Search Bar that adds a touch of sophistication to your website.
Join me in this coding journey where we’ll explore HTML for structure and CSS for style. Ready to make your website’s search functionality stand out with an Awesome Search Bar? Let’s get started – the HTML and CSS way!
HTML :
The provided code is an HTML document that creates a search bar web page. It includes a form with an input field for searching and a button with a search icon. The code also includes references to external CSS and Remix Icon files for styling and the search icon. The search bar allows users to enter text and perform searches.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Awesome Search Bar</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<form class="search">
<input type="text" placeholder="Search" class="search__input" />
<button type="button" class="search__button">
<i class="ri-search-2-line"></i>
</button>
</form>
<!-- partial -->
</body>
</html>
CSS :
The CSS code provided styles a search bar. It sets the background color, font, and color scheme for the page. The search bar itself is displayed as an inline-flex container with a gradient background. The input field and button are styled to have no background, border, or outline. The input field transitions its width when focused, and the button changes color on hover. The placeholder text is styled with a specific font and color.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Poppins", sans-serif;
background-color: #262433;
color: #fff;
display: grid;
place-items: center;
overflow: hidden;
}
.search {
display: inline-flex;
align-items: center;
background-image: linear-gradient(40deg, #111, #c22957);
color: #fff;
padding: 10px;
border-radius: 4px;
border: 1px solid #fff;
}
.search :is(input, button) {
background: transparent;
color: inherit;
border: none;
outline: none;
}
.search__input {
width: 0;
transition: width 0.5s;
}
.search__button {
display: grid;
place-items: center;
width: 25px;
height: 25px;
cursor: pointer;
transition: color 0.25s;
}
.search__button:hover {
color: #e3e3e3;
}
.search:focus-within input {
width: 200px;
}
::placeholder {
font: inherit;
color: #e3e3e3;
}To wrap it up, we’ve created a cool Awesome Search Bar using just HTML and CSS. Whether you’re a coding pro or just starting out, this tutorial kept things simple and straightforward. Now you’ve got a sleek and functional Search Bar to enhance your website.
If you ever find yourself facing any problems with your project, fear not. Click the Download button, secure the source code, and tackle your coding obstacles head-on. Enjoy your coding journey!
