How to Create a Beautiful CSS3 Search Box
CSS3 is the new age of styling for web pages. It brings forward fresh and innovative tools like shadows, animations, transitions, rounded corners, and more. Though the official guidelines aren’t set in stone, many browsers are already embracing these features.
This guide will show you how to use tools such as text-shadow, border-radius, box-shadows, and transitions to design a sleek search box.
While the original design for this search box came from Alvin Thong, I’ve aimed to replicate it using only CSS3. However, remember that not every browser supports all CSS3 tools. So, to follow along, make sure you’re using a recent browser compatible with CSS3.
Are you ready? Let’s dive in!
1. Starting with The HTML5 Doctype
Let’s kick things off with the HTML structure. Begin with the <!DOCTYPE html> which signifies HTML5 and then move on to the <head> section. Next, within the <body>, there’s a <section> with an ID labeled as #wrapper. This is primarily to set the content box’s width and align it center on the page.
Subsequent to that, there’s a <div> bearing the ID #main. This particular ID encapsulates styles that sketch out the prominent white boundary around both the input area and the search button. Inside this <div>, a <form> is declared. This form integrates the text input field and the search button. To give you a clear picture, here’s how the form appears without any styling:
And, here’s the raw code:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Search Field</title>
</head>
<body>
<section id="wrapper">
<h1>CSS3 Search Field</h1>
<div id="main">
<form>
<input type="text" id="search">
<input type="submit" class="solid" value="Search">
</form>
</div><!--main-->
</section><!--wrapper-->
</body>
</html>
2. Creating the Boudning Box
We start by framing a large box around the form. This is done by styling the <div> that carries the ID of #main. As shown below, the box is designed with a width of 400px and a height of 50px.
#main {
width: 400px;
height: 50px;
background: #f2f2f2;
padding: 6px 10px;
border: 1px solid #b5b5b5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
Key things to note are the border-radius and the box-shadow declarations. To achieve the rounded corners, we utilize the CSS3 border-radius. The prefixes “-moz-” and “-webkit-” ensure compatibility across gecko and webkit-based browsers. The box shadow definitions may seem intricate, but they’re rather straightforward:
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
Explaination:
The term “inset” dictates if the shadow is internal to the box. The initial two zeros represent x-offset and y-offset respectively, while 3px is the blur radius. Following that, there’s the color specification using rgba (red, green, blue, and alpha for opacity). Observe that five shadow declarations are combined, separated by commas. The first duo imparts the inner white glow, and the subsequent three render the box its robust appearance.
Experiment with these parameters to gain a deeper understanding.
Preview:
3. Styling Input Field
With the enclosing box ready, our next focus is on the input field’s styling.
input[type="text"] {
float: left;
width: 230px;
padding: 15px 5px 5px 5px;
margin-top: 5px;
margin-left: 3px;
border: 1px solid #999999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}
The styling for the input field is largely reminiscent of what we applied to the main box, #main. A consistent border radius of 5px is maintained. And similar to our previous approach, multiple box-shadows are combined.
box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
Explaination:
This iteration offers a stark shadow by keeping the shadow blur at zero. A vertical offset of 5px enhances the visual appeal. The subsequent shadow declarations maintain the blur at 0px, varying only in color and y-offset. Adjusting these values can yield a spectrum of effects, so feel free to experiment.
Preview:
4. Styling Submit Button
Now, let’s shift our attention to the search button’s styling.
input[type="submit"].solid {
float: left;
cursor: pointer;
width: 130px;
padding: 8px 6px;
margin-left: 20px;
background-color: #f8b838;
color: rgba(134, 79, 11, 0.8);
text-transform: uppercase;
font-weight: bold;
border: 1px solid #99631d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}
Although the search button adopts colors distinct from the enclosing box, they share several stylistic elements, like the border-radius and box-shadow. A fresh addition here is the text-shadow.
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);
Explaination:
In the text-shadow command, the initial three figures represent x-offset, y-offset, and blur respectively. The rgba codes determine the shadow’s hue. The subsequent declaration, separated by a comma, carries a y-offset valued at -1, giving the text an “inner shadow” essence. When interacted with, the submit button’s background and shadow subtly transform.
Preview:
“Active” State for the Button
When the button is in its “active” state, there are some notable changes. Specifically, the button is set to a ‘relative’ position with a ‘top’ value of 5px. This creates the illusion that when pressed, the button actually moves downwards by 5 pixels. This subtle shift makes it seem more interactive and intuitive. There are also alterations to the background color and shadows. An important observation is the reduction of the y-offset for the shadows, which further reinforces the “pressed down” effect. Here’s the styling for the active state:
input[type="submit"].solid:active {
background: #f6a000;
position: relative;
top: 5px;
border: 1px solid #702d00;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}
Complete CSS Code
We’ve finished designing our search field using several new CSS3 features. Below is the full CSS and HTML code for this search field.
#main {
width: 400px;
height: 50px;
background: #f2f2f2;
padding: 6px 10px;
border: 1px solid #b5b5b5;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
input[type="text"] {
float: left;
width: 230px;
padding: 15px 5px 5px 5px;
margin-top: 5px;
margin-left: 3px;
border: 1px solid #999999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}
input[type="submit"].solid {
float: left;
cursor: pointer;
width: 130px;
padding: 8px 6px;
margin-left: 20px;
background-color: #f8b838;
color: rgba(134, 79, 11, 0.8);
text-transform: uppercase;
font-weight: bold;
border: 1px solid #99631d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}
input[type="submit"].solid:hover,
input[type="submit"].solid:focus {
background: #ffd842;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}
input[type="submit"].solid:active {
background: #f6a000;
position: relative;
top: 5px;
border: 1px solid #702d00;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}
I hope you enjoyed this tutorial. Feel free to experiment with these features.