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>
Result is:
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...">
Result:
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;
}
Result:
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;
}
you can add anyidea in focus
Icon
now , we need an icon , first you need a small icon . here i have a n icon :
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;
}
Result:
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;
}
Result:
That's it . I wait for your answers !
Top comments (0)