Skip to main content

Simple Search Box Design | HTML And CSS

by Rustcode
Simple-Search-Box-Design-HTML-And-CSS-Rustcode
If we talk about websites, the user interface, and user experience matter a lot, so, first of all, we need to design an attractive user interface with smooth user experience. There are many small things inside a website that are used to beautify the front end of the website, those small things are created a smooth experience for visitors and the search box is one of them. The search box is used to search our query and besides this, the search box is a very important element of our website which may improve conversion rates and enhance user experience. 
I have written several articles related to website design on the same blog earlier, whose design is done by mixing only HTML, CSS, and JavaScript. Now in this article, I am covering how to design a search box using basic HTML and CSS.

1. CREATE HTML BLOCK

Before starting writing code, we need to create a basic structure of an HTML document, so that the browser can understand document type and may start some process. The basic HTML structure looks as below.
<!DOCTYPE html>
<html>
<head>
  <title>Document Title</title>
  <style>
  </style>
</head>

<body> 
 Content of the document.

<script type="text/javascript">
</script>

</body>
</html>

2. ADD HTML

After Writing the basic structure of the HTML document, you can write your required tags and content also, after that run this code on your browser and see the output. As we know that HTML only shows content in a basic format, it does not beautify that content. To beautify our content we need for CSS, which is inserted in an HTML document and it creates an attractive user interface.
<body>
 <div class="main">
   <input type="text" name="Search" placeholder="Search...">
   <button>SEARCH</button>
 </div>
</body>


3. ADD CSS

Now, it's time to beautify our HTML content, so we need to add to CSS in our HTML document. CSS can be added to the HTML document in three ways, here we are using the internal CSS method. Write CSS which is shown below and see the output on your browser.
<style type="text/css">
*{
  margin:0px;
  padding:0px;
  box-sizing: border-box;
}
body{
  font-family: sans-serif;
  padding-top: 150px;
  background:#000;
}
.main{
  margin: auto;
  width: 50%;
}
.main input,button{
  width:75%;
  border:2px solid white;
  border-right:0px;
  font-size: 18px;
  padding:12px;
  background-color: transparent;
  color:white;
}
.main input:hover{
  opacity: .8;
}
.main button{
  width:25%;
  background-color: #eee;
  color:black;
  transition: all 0.3s;
  float: right;
  border-left:0px;
}
.main button:hover{
  opacity: .8;
}
</style>

4. YouTube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.




If this article is useful and informative for you, share it. And if you have any doubt, please leave a comment.

Comments

Post a Comment