Create an Imageless CSS3 Search Box with Webfonts

In the Internet of the past, web design was all about using the images to create web designs. Backgrounds, buttons, layouts and just about everything else that had to do with visualization had to be accomplished by using an image either defined inline or in CSS. When you get right down to it, it is an extremely time consuming process to have to create images for every little piece of a website. That’s why when CSS3 and font embedding came along it was the greatest thing ever! No longer do you have to crack open Photoshop every time you want to make any changes to your site, because now great visuals can be created via code and rendered in the browser.

In this post we’re going to show how these things can come together by creating a search box with the accompanying icon without using any any images at all.

View Demo Download Files

So to start we’re going to want and get our icon that we’re going to use for the search button in the search box. This will be done by using the Font Awesome collection. Font Awesome is a prominent part of the Twitter Bootstrap framework but there are many other great icon font packages all over the web. But for this example, we’ll use this. So go on over to the Font Awesome project page and download the package.

We can create a directory for our example project here and create a directory within it called “fonts” where we can place the FontAwesome webfont files. What’s great about this is that by including a few files here we now can use hundreds of different icons in a webpage simply by giving a class to an element.

Now we’re going to want to embed the font in our webpage in our CSS. Create another directory called CSS and create a style.css file within it. Add the following…

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot');
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('../fonts/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Now that the font is embedded in our CSS we can write some markup for our search form…

HTML

The HTML will be fairly straightforward. We can create an index.html file and place it in the root of our project directory…

<div class="nbs-search">
    <form method="get" action="https://9bitstudios.com/">
        <input type="text" class="" value="" name="s"><button type="submit"></button>
    </form>
</div>

I’m wrapping the search form inside of a <div>. The <div> will be the element where we can set whatever width we want our search form to be. The actual search form itself will stretch to 100% of it’s container (in this case the <div> element).

Note too that I use the “nbs” prefix (for Nine Bit Studios) for my HTML. It is often a good idea to prefix your selectors with some sort of unique string identifier so that your CSS does not collide with some other CSS selector that might be used by a jQuery plugin or something like that. In this case, if we were to just name our class “search”, that’s a pretty generic name and runs a risk of being redefined in some other CSS rule elsewhere. But if we use prefixes, we don’t have to worry about it.

CSS

First we’re going to want to do a few resets of some components found in forms. If you are not familiar with CSS resets they’re essentially a way to set a lot of the common HTML elements to some base default values so that you can begin by having the elements display the same in all browsers (well, as close to it as possible anyway). The “Eric Meyer CSS reset” is one of the more well-known implementations mainly for being one of the first attempts to make tackling the problem of consistency between browsers a public, standardized and community effort. That laid the groundwork for others to build upon. By now, any modern front-end framework like those such as Twitter Bootstrap, and ZURB’s Foundation will have some form of a CSS reset included within them.

But because we do not have this in our CSS for our simple example, we’ll just do a brief reset of some form elements…

form {
  margin: 0;
}

input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
 *vertical-align: middle;
}

input,
button {
  line-height: normal; 
}

button,
input[type="button"], 
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  *overflow: visible;
}

button::-moz-focus-inner,
input[type=submit]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
}

Now we’re going to want to define our CSS for the actual search form…

.nbs-search {
  width: 40%;
  padding: 0px 0px 0px 0px;
  position: relative;
}
.nbs-search form input {
  float: left;
  overflow: hidden;
  border: none;
  padding: 7px 0px 7px 15px;
  width: 100%;
  color: #666;
  background: transparent;
  border: 1px solid #ccc;
  -moz-border-radius: 50px 50px 50px 50px;
  border-radius: 50px 50px 50px 50px;
  -moz-box-shadow: inset 0 0 2px 2px #ccc;
  -webkit-box-shadow: inset 0 0 2px 2px #ccc;
  box-shadow: inset 0 0 2px 2px #ccc;
}

.nbs-search form button {
  width: 20px;
  height: 20px;
  padding: 0px;
  margin: 0px;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 7px;
  background: none;
}
.nbs-search form button:before {
  font-family: 'FontAwesome';
  content: "\f002";
  font-size: 18px;
}

Notice that the button’s font family is ‘FontAwesome’ in the :before psuedo-class. This is where we use our webfont that we declared previously in the CSS to display the icon. The “content” specifies the code for the icon. If we were to change this value, another icon would appear in it’s place.

What’s great about this is that we can easily override the default styling for the form to fit any color scheme that we want. For example, we could create a new class like so by adding the class “nbs-search-black” to our input and button elements…

.nbs-search form input.nbs-search-black {
  color: #666;
  background: #000;
  border: 1px solid #222;
  -moz-border-radius: 50px 50px 50px 50px;
  border-radius: 50px 50px 50px 50px;
  -moz-box-shadow: inset 0 0 2px 2px #222;
  -webkit-box-shadow: inset 0 0 2px 2px #222;
  box-shadow: inset 0 0 2px 2px #222;
}

.nbs-search form button.nbs-search-black {
  color:#999;
}

And if we apply that class to the <input> element in the form, we’ve created a “dark” version of our search box. Pretty slick, eh? We don’t need to crack open Photoshop to change the icon’s color or size or anything else. Because we are using an embedded webfont to display the icons, we can change the properties of the icon right there in CSS. Pretty slick, eh?

View Demo Download Files