Stylish Search Box In HTML CSS Code
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Anjali
In this tutorial we will show you the solution of stylish search box in HTML CSS code, in HTML today we will explain the topic of stylish search box in HTML with CSS code.
We already explained the topic of search box in html and in that article we say that we tell you in next session that how you are able to make a stylish search box in html.
Now, this is the session in which we are going to explain how we are able to make a stylish search box in html with the help of css code.
Step By Step Guide On Stylish Search Box In HTML CSS Code :-
Now, here after this paragraph, we are going to show you some codes with the help of which we make some search boxes.
As there are many ways to make a stylish search box, but we will explain you the basics and you can modify them according to your own choice.
So, here we show you example in which we create three search boxes.
In first the background color given in black, text color is white and in second it’s vice versa.
Both are made with the help of border radius. Third one is google search box.
<!DOCTYPE html>
<html>
<head>
<title>forms</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
text-align: center;
}
#srch {
width: 500px;
height: 50px;
font-size: 30px;
border-radius: 50px;
background-color: black;
color: white;
border: none;
text-align: center;
}
#search{
width: 650px;
height: 45px;
border-radius: 40px;
border: 1px solid lightgray;
font-family: sans-serif;
font-size: 20px;
padding-left: 50px;
}
#box {
width: 500px;
height: 50px;
font-size: 30px;
border-radius: 50px;
background-color: white;
color: black;
border: 1px solid black;
text-align: center;
}
.fa-magnifying-glass{
position: relative;
top: 35px;
left: 20px;
color: grey;
}
.fa-microphone-lines{
position: absolute;
top: 35px;
right: 20px;
color: grey;
}
</style>
</head>
<body>
<input type="search" name="srch" id="srch">
<br>
<br>
<input type="text" name="box" id="box">
<br>
<br>
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" name="search" id="search">
<i class="fa-solid fa-microphone-lines"></i>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- So, both have </head> and </title> ending tags respectively. Before closing head tag, we link a fontawesome cdn file, which is already discussed in previous sessions.
- Here, the content to be showed on browser’s display is written here. Here, we show you two example mostly both are same.
- In first and second both are same but different in background color and text color.
- Whereas the last one is a perfect example of google search box, in this we use some font awesome icons and make a stylish search box.
- These are the example of round search boxes, if you want to make sharp edge search box. You can set border-radius according to your own choice.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article you are able to make a stylish search box in html with CSS codes.
You are only able to show you direction, rest is upon you that how you can more creative search box.
I hope this tutorial on stylish search box in HTML CSS code helps you.
About Anjali
