How to expand search box smoothly on mouse click with css3 effects

Hi Guys,

Today’s topic is on,

How to expand search box smoothly on mouse click with css3 effects

I’ll show you how I did expand search box smoothly on mouse click. You might have seen this type of animation on several websites and you know what – most of those websites achieve those using jquery. But, what I’m going to show you is using pure CSS – No jQuery – No Scripts.

Requirements:

  • HTML code with a form and an Input typeSearch or Text
  • Style sheet

Markup to expand search box smoothly on mouse click

 Styles to expand search box smoothly on mouse click

Do you want the Search icon for free to use? Download search icon for free from PepFry.com.

So, the above was all that we needed for our search box to expand out smoothly as jQuery does!!

I’ll break the code. So that, you’ll understand better.

Hope you are aware of the input types of the form element – I have used the HTML5 standard input type “Search“. You can even use “Text” or “Textarea” in place or “Search

<input type=”search” value=”" name=”" placeholder=”Search…” >

Also the Button

<button></button>

I wrapped them with the form element as a standard practice. Please see below:

<form method=”post” action=”#” target=”_blank” >
   <input type=”search” value=”" name=”" placeholder=”Search…” >
<button></button>

</form>

Now, I’ll take you to the Styles

1. Styles for the search box when it is in normal state. That is – before the user clicks on it.

input[type=search] {
    width: 250px;
    height: 24px;
    border: 1px solid #666666;
    padding: 8px;
    font-size: 19px;
    color: #333333;
    vertical-align: bottom;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;    
    transition:width 1s;
    -webkit-transition:width 1s; /* Safari */
    transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    }

Hope, you are aware of most of the styles used above. For this tutorial – we’ll need only the Transition styles. So, I’ll explain only them.

    transition-timing-function: ease;      /*Firefox*/
    -webkit-transition-timing-function: ease;   /* Safari */

The above styles tell the browser to apply Transition and a Transition type to the Search box with a transition type “ease. You can feel free to apply many other types available. For a list of Transition types and browser compatibility checks please visit w3schools. Also, see some cool animations done with CSS3 at css3.bradshawenterprises.

  transition:width 1s;     /*Firefox*/
  -webkit-transition:width 1s;    /* Safari */

The above styles tell the browser to Delay any Transition that is applied to the Search box by 1s – 1 second. You can feel free to apply more.

In this example, I am expanding the search box Horizontally – So, I’ll need to increase its width. But, I want to expand the search box on mouse  click. So, what I’ll do is – I’ll write the On focus style.

Style for the On focus

input[type=search]:focus {
    border: 1px solid #1D9CC7;
    width: 300px;        
    }

Since we have already applied transition to the Search input type. When clicked it expands from 250px to 300px. Not only that it will just expand it will expand smoothly as we required.

Here is the full source code to expand search box smoothly on mouse click – so that you can directly copy and paste it on your HTML file and run it right away.

Once you run – you will see the search box as you ca see in the below screenshots.

When not clicked

expand search box_ smoothly on mouse click with css3 effects normal state - PepFry

Expand search box  smoothly on mouse click with css3 effects normal state

When clicked by any user:

Expand search box_ smoothly on mouse click with css3 effects expanded state - PepFry

Expand search box smoothly on mouse click with css3 effects expanded state

Guys, hope you’ve enjoyed this tutorial on “How to expand search box smoothly on mouse click with css3 effects“.

If you ever stuck up with any kind of issue please do not forget to comment your question on the comment section below.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">