search box cssThe 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:

search box 1

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:

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:

search box 2Quite 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:

css 1

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.

css 2This 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.

color 1We’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.

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

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

search box 3Confused 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.

search box 4Keep 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:

css 5Now, add the following code to your CSS file:

css 6Here, 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:

search box 5Creating 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.

Top courses in CSS

HTML5 and CSS3 Fundamentals
Stone River eLearning
4.5 (19,459)
The HTML & CSS Bootcamp 2023 Edition
Colt Steele
4.8 (1,400)
Bestseller
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Jonas Schmedtmann
4.8 (42,006)
Bestseller
50 Projects In 50 Days - HTML, CSS & JavaScript
Brad Traversy, Florin Pop
4.6 (10,732)
Build Responsive Real-World Websites with HTML and CSS
Jonas Schmedtmann
4.7 (99,590)
Bestseller
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
Daniel Walter Scott
4.7 (5,767)
Bestseller
Understanding HTML and CSS
Anthony Alicea
4.6 (1,771)
CSS - The Complete Guide 2023 (incl. Flexbox, Grid & Sass)
Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
4.7 (17,165)
Bestseller

More CSS Courses

CSS students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.

Request a demo