DEV Community

Cover image for Create Google Search Bar | Simple Input Tutorial
Mobin
Mobin

Posted on

Create Google Search Bar | Simple Input Tutorial

#html #css #tutorial #beginners

Hi there. here we want to create a search tab (or other text input) But i don't teach you how to make a search system this tutorial is just for CSS & HTML .

Making a text input

At first we need to make input it must be like this : (use 'input' Tag)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Search Bar</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
<input type="text" id="searchTab">
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Result is:

RawsearchTab

now we need to add a text to tell user : "You must search!" .
i mean something like : "Search..."
so we add 'placeholder' :

<input type="text" id="searchTab" placeholder="Search...">
Enter fullscreen mode Exit fullscreen mode

Result:

Image description
Lets Go !
Now we need to create style : (Go in css file/style tag)

#searchTab {
  font-size: 15px;
  height: 30px;
  border: 2px solid #cccccc;
  border-radius: 15px;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description
But when we click on it , it get outline we don't wanna this.
actually , when we click on it ,we focus on is so we use ':focus' :

#searchTab {
  font-size: 15px;
  height: 30px;
  border: 2px solid #cccccc;
  border-radius: 15px;
}
#searchTab:focus{
  outline: none;
}
Enter fullscreen mode Exit fullscreen mode

you can add anyidea in focus

Icon
now , we need an icon , first you need a small icon . here i have a n icon :

Image description

then do this:

#searchTab {
  background-image: url("search.png");
  background-repeat: no-repeat;
  font-size: 15px;
  height: 30px;
  border: 2px solid #cccccc;
  border-radius: 15px;
}
#searchTab:focus{
  outline: none;
  background-image: none;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

Fix problem
Now there is a big problem . When we type a text image will be hide , it looks ok but when user write something and cicks another place , image will be show over our text and its our bug .
How to Fix it?
i know that we can fix this bug with JS , but i have challange for you , you must tell the answer in commants , and best and shortest answer will win and i will tell the winner in next post . (if we have any answer)

And for the last work , i will add some style :

#searchTab {
  background-image: url("search.png");
  background-repeat: no-repeat;
  font-size: 15px;
  max-width: 100ch;
  height: 30px;
  border: 2px outset #cccccc;
  border-radius: 15px;
  transition: box-shadow 1s;
  text-align: center;
  color: #888888;

}
#searchTab:hover {
  box-shadow: 0px 0px 3px black;
  transition: border 1s;
}

#searchTab:focus{
  border: 4px inset #cccccc ;
  outline: none;
  background-image: none;

}
Enter fullscreen mode Exit fullscreen mode

Result:

Image description

That's it . I wait for your answers !

Top comments (0)