css search bar – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 17:18:54 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create a Responsive Search Bar in HTML & CSS | Free Source Code https://www.codingnepalweb.com/search-bar-html-css-javascript/ https://www.codingnepalweb.com/search-bar-html-css-javascript/#respond Sat, 12 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4147 Create a Responsive Search Bar in HTML & CSS | Free Source Code

The search bar has become the most important section on the website or application. You must have used it to search for information on YouTube, Google, Facebook, and other sites. Although Search Box is the most important section for the website or application even then it can be created easily by using basic code of HTML & CSS.

Today in this blog you will learn to Create a Responsive Search Bar in HTML & CSS. Even if you have basic knowledge of HTML & CSS, then also you can create a Search Bar. Recently I created a Simple Website in HTML & CSS, I hope that project also could be beneficial for you.

The search bar is the input section where users have to type what they want to search. For example, In Google, if we have to search or find articles, websites, images, and videos then we need to use the search bar.

Take a look at the given preview of our Search Box that we are going to create today. As you can see in the image, there is a search bar with a long width. At that Search Bar, there is a search icon, search field, and search button. This Search Bar is fully responsive and easily get fits any size of screen device.

To see the real demo of this Search Box and all the HTML & CSS code that I have used to create this Responsive and Full-Screen Search Bar, I have provided a video tutorial.

Create Search Bar in HTML & CSS | Video Tutorial

I have also provided all the HTML & CSS code that I have used to create this Responsive Search Bar. Before getting into the source code file, I would like to briefly explain the given video tutorial of the Search Box.

As you have seen in the video tutorial. At first, on the screen, there was a Full-Screen Search Bar with an input field, a search icon, and a beautiful. You may have got to know that this search bar actually can be created with HTML and CSS code. To give click animation on the button I had to use some JavaScript code.

I believe now you are able to create a Search Box. If you are feeling difficulty and wondering to get all the HTML CSS and JavaScript code of this Search Bar that I have used then, you can take all the source code from below.

You May Like This:

Search Bar in HTML & CSS [Source Code]

To create a Responsive Search Bar, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Responsive Search Bar by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Search Bar in HTML and CSS</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- Unicons CSS -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
  </head>
  <body>
    <div class="input-box">
      <i class="uil uil-search"></i>
      <input type="text" placeholder="Search here..." />
      <button class="button">Search</button>
    </div>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.input-box {
  position: relative;
  height: 76px;
  max-width: 900px;
  width: 100%;
  background: #fff;
  margin: 0 20px;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-box i,
.input-box .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input-box i {
  left: 20px;
  font-size: 30px;
  color: #707070;
}
.input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  font-weight: 400;
  border: none;
  padding: 0 155px 0 65px;
  background-color: transparent;
}
.input-box .button {
  right: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  background-color: #4070f4;
  cursor: pointer;
}
.input-box .button:active {
  transform: translateY(-50%) scale(0.98);
}

/* Responsive */
@media screen and (max-width: 500px) {
  .input-box {
    height: 66px;
    margin: 0 8px;
  }
  .input-box i {
    left: 12px;
    font-size: 25px;
  }
  .input-box input {
    padding: 0 112px 0 50px;
  }
  .input-box .button {
    right: 12px;
    font-size: 14px;
    padding: 8px 18px;
  }
}

That’s all, now you’ve successfully created a project on the Responsive Search Bar. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/search-bar-html-css-javascript/feed/ 0 Search Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/search-bar-html-css-javascript-2/ https://www.codingnepalweb.com/search-bar-html-css-javascript-2/#respond Fri, 15 Jul 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4169 Search Bar in HTML CSS & JavaScript

Hello friend, I hope you are doing awesome. Today you will learn to create a Search Bar in HTML CSS & JavaScript I will add some animation to our search bar also. Earlier I created a Seach Box using HTML and CSS only. But in today’s search box I will add a few JavaScript.

Search Bars are the section where users can search for the things that they want to. Search Bar can be in different designs but the main objective of the search bar is to search.

Have a quick look on the given image of our search bar on the webpage. As you can see from the image of our search box. There is a search box, inside the search box there are two icons and a search section. Actually, in our real project, this search bar will be in closed form and when we click on the search icon then the search bar will open, and close the search bar we need to click on the cross icon. I have added beautiful cubic animation too.

To see the real demo of this search bar and its animation, you need to watch the give video tutorial of our search bar. Also by watching the video tutorial, you will get an idea about HTML CSS, and JavaScript codes that I have used to create this search bar.

Search Bar in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Search Bar. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial. At first, we saw one square shape box with a search icon. When I clicked on that square box, the search box opened and cross icons also appeared. When I clicked on that cross icon then the search bar closed and the cross icon disappeared. The search bar is created by HTML and CSS, for the animation, I have used CSS cubic bezier and to open and close the search bar I have used some JavaScript code.

I hope now you can create this search bar using HTML CSS and JavaScript. If you are feeling difficulty creating this sidebar, I have provided all the source code below.

You Might Like This:

Search Bar [Source Code]

To get the following HTML and CSS code for the Search Bar you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Animated Search Bar </title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                
        <!-- Unicons CSS -->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
                        
    </head>
    <body>
        <div class="input-box">
            <input type="text" placeholder="Search...">
            <span class="icon">
                <i class="uil uil-search search-icon"></i>
            </span>
            <i class="uil uil-times close-icon"></i>
        </div>

        <script>
            let inputBox = document.querySelector(".input-box"),
                searchIcon = document.querySelector(".icon"),
                closeIcon = document.querySelector(".close-icon");

            searchIcon.addEventListener("click", () => inputBox.classList.add("open"));
            closeIcon.addEventListener("click", () => inputBox.classList.remove("open"));
        </script>
        
    </body>
</html>

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
  overflow: hidden;
}
.input-box{
  position: relative;
  height: 55px;
  max-width: 55px;
  width: 100%;
  margin: 0 40px;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box.open{
  max-width: 350px;
}
input{
  position: relative;
  outline: none;
  border: none;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}
.input-box.open{
  padding: 0 15px 0 65px;
}
.icon{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 60px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.search-icon,
.close-icon{
  position: absolute;
  top: 50%;
  font-size: 30px;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-icon{
  color: #4070f4;
  
  transform: translateY(-50%) rotate(90deg);
}
.input-box.open .search-icon{
  transform: translateY(-50%) rotate(0);
}
.close-icon{
  right: -45px;
  color: #fff;
  padding: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-box.open .close-icon{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(180deg);
}

 

 

]]> https://www.codingnepalweb.com/search-bar-html-css-javascript-2/feed/ 0 How To Make Search Box Using HTML & CSS https://www.codingnepalweb.com/how-to-make-search-box-using-html-css/ https://www.codingnepalweb.com/how-to-make-search-box-using-html-css/#respond Mon, 15 Feb 2021 21:09:48 +0000 https://www.codingnepalweb.com/?p=4236 Search Box Design Using HTML CSS

Hello Readers, today in this blog I’m going to create a Search Box Design Using HTML CSS, and this search box will fully responsive. Earlier I have shared How To Create Login Form in HTML CSS, now we will go for search bar design.

Simply, A search box is an input field where the user has to type what they wanted from the specific webpages. Nowadays there are various types of search boxes on the internet but the main motive of a search bar is the same.

As you can see on the given image of this program [Responsive Search Box], This is the real example of a search bar. At first, this search bar is in small form literally we can see only the search icon and when we clicked on that search icon smoothly search box appears with an input field.

If you want to see the essential code behind this program [Responsive Search Bar Design], and all animation that I have added to this program please do watch the full video tutorial of this program [Animated Search Box Design] that I have provided below.

Full Video Tutorial Search Box Design Using HTML & CSS

As you have seen in the given tutorial of this program [Search Box Design ], At first there is only a search box icon on the screen in round shape, when we clicked on that search icon search’s input field smoothly and the round shape of the icon turns into rectangle shape in the left part and round shape in the right side. To make this animation I have used HTML input’s checkbox.

If you are familiar with HTML & CSS then you can easily create this program [Responsive Search Box Design], those friends who are feeling difficulty to build this program, don’t worry i have provided full source code below.

You Might Like This:

Search Box [Source Code]

To copy-paste the given codes of this program [Animated Search Bar Design], at first you need to create two files, one is an HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given codes in your document.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Responsive Search Box | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="box">
    <input type="checkbox" id="check">
    <div class="search-box">
      <input type="text" placeholder="Type here...">
      <label for="check" class="icon">
        <i class="fas fa-search"></i>
      </label>
    </div>
  </div>

</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: #FF676D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box{
  max-width: 400px;
  width: 100%;

}
.box .search-box{
  position: relative;
  height: 50px;
  max-width: 50px;
  margin: auto;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  transition: all 0.3s ease;
}
#check:checked ~ .search-box{
  max-width: 380px;
}
.search-box input{
 position: absolute;
 height: 100%;
 width: 100%;
 border-radius: 25px;
 background: #fff;
 outline: none;
 border: none;
 padding-left: 20px;
 font-size: 18px;
}
.search-box .icon{
  position: absolute;
  right: -2px;
  top: 0;
  width: 50px;
  background: #FFF;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #FF676D;
  font-size: 20px;
  border-radius: 25px;
}
#check:checked ~ .search-box .icon{
  background: #FF676D;
  color: #FFF;
  width: 60px;
  border-radius: 0 25px 25px 0;
}
#check{
  display: none;
}

If you face any difficulties while creating your Animated Search Box or your code is not working as expected, you can download the source code files for this CSS Search Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/how-to-make-search-box-using-html-css/feed/ 0