How to Build a Stylish CSS3 Search Box

A search box is probably one of the most common UI elements around, and I think there is no need to explain its purpose anymore. Whether it’s about a website or a web application, to increase user experience for it, you may want to add a stylish search box.

Today, you will learn how to create a nice CSS3 search box using pseudo-elements.

The HTML

As you can see below, the markup is minimal and easy to understand:

<form class="form-wrapper cf">
        <input type="text" placeholder="Search here..." required>
        <button type="submit">Search</button>
    </form>   

You may have noticed the HTML5’s specific attributes like placeholder and required, here’s a short description:

  • placeholder– Basically, this attribute shows a text in a field until the field is focused upon, then it just hides the text.
  • required– This specifies that the current element is a required part of a form submission.

HTML5 also brought us a new value for the type attribute: type="search". Though, because of cross browser inconsistency, I decided to skip it for now.

Quick Tip

HTML elements like img and input have no content, therefore, a pseudo-element like :before will not render any arrow for our search button.

My solution was to use the button type="submit" element instead of casual input type="submit". This way, we can preserve the submitting form on ENTER key functionality.

The CSS

Below you can find the necessary styles for our demo:

Clear Floats

.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}    

Form Elements

Prefixed properties like -moz-box-shadow weren’t included, I just wanted to keep the following code clean. Though, they are included in the demo example.

/* Form wrapper styling */
.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 150px auto 50px auto;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

/* Form text input */

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;      
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
  
.form-wrapper button:hover{		
    background: #e54040;
}	
  
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;
	outline: 0;   
}

.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #c42f2f;
}      

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}    

That’s all!

I hope you liked this tutorial and I’m looking forward to hear your thoughts about it. Thank you for reading!

(1 Posts)

Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques. He works at Caphyon and writes regular tutorials on his website. Also, you can connect with him on Twitter @catalinred.

Comments

  • That was simple! thanks for tuts Catalin !!

  • I didn’t quite understand how you made the little arrow on the submit button. Which part of the code is responsible for this?

  • Nimsrules

    Sweet, sexy and usable. I wasn’t surprised to find Red behind this tutorial :)

  • Captain Kickarse

    cool tutorial, thanks.

  • Red

    Thank you for commenting, I’m glad you like it :)

  • Red

    Josh, nice to see you added it on your website. It looks good! ;)

  • Red

    You can search the CSS for .form-wrapper button:before. Again, pseudo-elements are responsible for custom shapes like that little arrow.

  • Red

    Indeed, it’s simple, effective and ready to use for any website.

  • Just what i was looking for and it apeard in my google reader.

  • Genius use of borders to create the arrow. Previously I’ve always just rotated a box, but naturally that adds complications with prefixes and is a significant performance hit over the creative use of borders.

    I’ve sent this article to our design team as an example of the beauty which can be achieved through CSS3. Great work!

  • i looked for it, thx :)

  • Thulani

    This is the best so far

  • I have the search box in place and customised, is there a tutorial on how to actually make it search? At the moment it just clicks to a blank page. 

  • Thanks, just what I have been looking for. :)

  • Red

    Thank you Ciprian, nice to see you’re using this! ;)

  • Mail’ette

    This is a really nice tut! 

  • leo

    awsome tutorial Catalin. Implemented in my blog although I have to adjust the property and id. To do that I use either tinkerbin or jsfiddle.

  • Bhadz

    thanks for this very nice search box, i will use this on my website, i’l credit it to you. thank you very much.

  • chuck

    This is an excellent self contained form example. Very creative. 

  • Neim

    How do I get the search bar to the position I want it in? I want it in the top left, near my logo, but nothing will work.

  • balakrishnan

    Nice Work Easy to Use….!

  • KK

    It wont work on IE

  • wawi

    wow…very nice tut…

  • jester88

    Wrap it in a div. Use CSS position: absolute and then position it like that. I know it works because I literally did it 5 seconds ago lol.

  • Wallpapersmyth

    Thank Catalin Rosu,
    Simple but very elegant search box, exactly what i was looking for :)
    Implemented this one on my photo blog

  • mike

    Where does the “please fill out this field” come from? I cannot find it in the document

  • Igi Igor

    I’m interested too…

  • Igi Igor

    I’ve find out :) There is a “required” command, causes in HTML5 to pop up that message. I’ve just delete it.

  • Hey Red, love the tutorial but I am struggling with something. I am trying to resize it all so it is no higher than 25px. The problem is that the word ‘SEARCH’ won’t place itself evenly in the middle of the input button. Can you advise?

  • how can i manage the width of the box. i did change the width of the inputbox and the button but i couldn’t change the width of the shadow that appear behind them both !!!!! plz help me

  • Croydon

    Where exactly do you put the name of the site you want to search?

  • Mehul

    Hey, i loved the tutorial!! Helped me understand a lot about css 3!

    I was wondering if i can use it on my website?

  • elo

    you forget .form-wrapper button:active:before,

  • Andrew

    Thank you! A beautiful search form.

  • Guest

    obviously

  • Rutul Lathiya

    there is a problem in your script. it works fine but search box height is 40px not 20px.

    check on script line nu 16 in From element section
    height: 40px (not 20px)

  • VJ

    Is there any way i can get the results in the same page as a popup.

  • Wow very Nice