Search Box CSS: How to Create a Great Looking Search Box

Kasia Mikoluk

The search box is one of the most important UI elements on a web page. Explaining its purpose is a rather moot point; anyone not currently living under a rock is already familiar with Google and search engines in general. A search box on a webpage performs a similar function and allows the user to find specific content on your website. It is an absolute necessity for most websites and does much to improve user-experience.

In this tutorial, we will learn how to create a great looking search box using CSS (Cascading Style Sheets). This is an intermediate-level tutorial and requires some basic understanding of CSS, which you can learn from this course on CSS fundamentals.

Creating the HTML

In this example, we’ll create a simple search box that requires textual input and includes a search button on the right. Although quite basic, this search box can be easily modified to fit different websites.

Before we can create the CSS, we need to build our HTML.

Add the following code in a new HTML document. As always, I recommend that you type-in the code rather than pasting it directly; it just makes for better learning.

<form>
                                <input type="text" placeholder="Search..." required>
                                <input type="button" value="Search">
</form>

Save the document and open it in a browser. This is what you should see:

This creates a simple form with a text field and a submit button next to it. While this code is pretty much straightforward, let’s look at some of the important details:

placeholder: This is the text that shows up in the search field before you enter any input. You can change it to anything you like.
required: This tells the browser that the search box requires some input for the form to work.

Completely new to CSS and HTML? Learn the basics of web design in this primer on CSS & HTML.

Adding the CSS

This form looks quite dull at the moment. Thankfully, we can use CSS to spice things up a bit.

Create a new blank document and add the following CSS to it:

form {
                width:500px;
                margin:50px auto;
}
.search {
                padding:8px 15px;
                background:rgba(50, 50, 50, 0.2);
                border:0px solid #dbdbdb;
}
.button {
                position:relative;
                padding:6px 15px;
                left:-8px;
                border:2px solid #207cca;
                background-color:#207cca;
                color:#fafafa;
}
.button:hover  {
                background-color:#fafafa;
                color:#207cca;
}

Now link it to the original HTMl document and reload the form in the browser. This is what you should see:

Quite an improvement! As we’ll see below, changing the colors of the form is quite easy with a few minor CSS tweaks.

Let’s look at the CSS in more detail:

This simply instructs the browser to set the width of the form to be 500px and set the top and bottom margins to 50px. ‘Auto’ here means that the left/right margins are set automatically, i.e. the element is centered on the page.

This is used to style the search box which has the .search class. We’ve given it a top/bottom padding of 8px and a left/right padding of 15px.

We’ve also given it a background color using RGBA values, where the first three values refer to the RGB colors (Red, Green, Blue), and the final (‘A’) value refers to transparency. The lower the transparency value, the more transparent the element.

A RGB value of (50, 50, 50) corresponds with a hex color value of #323232.

We’ve also given it a 0px border. This is just a precautionary measure to ensure that older browsers don’t give it a border by default. You can skip this step if you want to.

This is the styling for the search button. A few things to note here:

position:relative – The search button, by default, is placed to the right of the search box with a margin of a few pixels between the elements. Since we want the button to be right next to the search box, we’ve given it a relative position.
left:-8px – Since the element now has relative position, we can shift it to the left by giving it a negative position.
padding:6px 15px – The top/bottom padding for the button is less than that for the search box because we’ll be adding a 2px border later.

This code changes the background and text colors of the button. This is what our search box should look like on hover:

Confused by all this CSS? Master CSS essentials in just a few hours with this incredible CSS 3 crash course!

So far, we’ve created a standard search box that can be used with most websites with a few minor tweaks. But what if you wanted to add a bit more stylistic chutzpah to your search box?

Fortunately, you can use CSS to create a lot more than change colors and add borders.

Changing Placeholder Text Formatting

Changing the search box placeholder text formatting is a bit more complicated than it appears. Different browsers handle the placeholder text differently. Hence, any change requires altering the settings for each browser individually.

Below, we’ll change the placeholder text color to red and the font to Helvetica Neue.

::-webkit-input-placeholder { /* For WebKit browsers */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}

:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}

::-moz-placeholder { /* For Mozilla Firefox 19+ */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}

:-ms-input-placeholder { /* For Internet Explorer 10+ */
    color:    #dd3333;
                font-family:Helvetica Neue;
                font-weight:bold;
}

This is what the search box looks like now.

Keep in mind that this works only for the latest browsers, so don’t make it the focal point of your search box design.

Adding an Arrow to the Search Button

Adding a left arrow indicator to the search button is not only aesthetically pleasing, but also a good UX practice to direct the user towards the search box. Adding an indicator can be slightly tricky and requires the user of the :after pseudo-selector, as shown below.

First of all, we need to wrap our search button in a <span> element in order to use the :after pseudo-selector:

Now, add the following code to your CSS file:

Here, we are essentially giving the .arrow class a relative position, then adding a transparent triangular “border” halfway to the left of the box. The result is as follows:

Creating arrows yourself can be a bit tricky. A better option would be to use one of the many different CSS arrow creation tools available online, such as CSS Arrow Please and CSS Arrow Generator.

This is just one of the many style additions you can make to your search box. You can add drop shadows, gradients, flat design, etc. to fit your design requirements. You can learn more about mastering these CSS concepts in this course on advanced CSS training.