Create Google Search Bar | Simple Input Tutorial
Tags: css, tutorial, html, beginners
Published: 2022-07-29 10:55:54

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_)

```html
<!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>

```
Result is:

![RawsearchTab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2eiyjuloq492f64u3hbw.png)

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

```html
<input type="text" id="searchTab" placeholder="Search...">
```
Result: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cll2ry9zzaaapw0f256b.png)
Lets Go !
Now we need to create style : (_Go in css file/style tag_)
```css
#searchTab {
  font-size: 15px;
  height: 30px;
  border: 2px solid #cccccc;
  border-radius: 15px;
}
```
Result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0j9h7wq6l8egktd1ca9.png)
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' :
```css
#searchTab {
  font-size: 15px;
  height: 30px;
  border: 2px solid #cccccc;
  border-radius: 15px;
}
#searchTab:focus{
  outline: none;
}

```
_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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmw3k4ttv7nbiut1cake.png)

 then do this:
```css
#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;
}
```
Result: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvtk8fpz7agct67c7m2v.png)

**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 :
```css
#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;

}

```
Result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7968wvf02jj2u49jsbz.png)


That's it .  I wait for your answers !