Cool Search Box Using HTML5 and CSS3

3 Dec , 2012  HTML & CSS 

HTML5 Search Box TutorialThis tutorial is my inspirational find for a way to create a nice and cool looking search bar using HTML5 and CSS3.

Search bars are something very important for any website or blog. As the HTML5 and CSS3 standards are gaining popularity these days, We will see how this is achieved in a short while below using those standards, but before proceeding, check out the demo below.[CSS3 and HTML5 are really really cool]

DEMO | DOWNLOAD

OBJECTIVE OF THIS TUTORIAL:

  • Create a Search form box
  • Using HTML5 and CSS3 standards
  • Add placeholder text for the search form and change the state on click on the form.
  • Add Transparency to the search window

EXPLANATION:

This search form is created the same way other search forms are created in HTML, but we use CSS3 styles to decorate the element and we use the HTML5 placeholder property to add the background search form text.

Basically, we start by adding the <form> tag between the div tags as shown below.

HTML5 Markup Code:

You can see that there is an attribute by name “placeholder”, which is the HTML5 property to add a text to the search form in the background. This makes the search form modern. In this search form, we create a normal form, an input field using <input> tag for text input, and an input field for submit button.

Next, we need to style the above search form. We do it using CSS3.

We start of by adding a general style for the form with width and height as shown in the below CSS:

Now, we style the input box with CSS3 rounded properties as shown below:

We also add some shadow for the text and the input box using text-shadow and box-shadow respectively. The rest of the attributes are self explanatory. Now, we do some roundup for the “go button” with an image as background using the below CSS:

That’s it for the styling, rest of the CSS is just some minor tweaks for a successful healthy read to go search box for websites.

Here is the complete CSS code below:

CSS3 Code:

DEMO | DOWNLOAD

Hope you liked this tutorial and the demo as well. We will come up with more experiments in the future. Don’t forget to subscribe to us.



, , ,