Image-free, custom-styled search bar


I'm working with the designer and he sent me the following design for the search bar on our webpage:

enter image description here

I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.

Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?

Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.

Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?

Problem courtesy of: Jon


Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an @font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction:

From there, you should be able to style it with CSS to make it look the way your designer wants.

Solution courtesy of: ReLeaf


Something like this will manage

<style type="text/css">
form {
    background-image: url(1noty.png);
    height: 50px;
    width: 240px;
input {
    background-image: url(bg.png);
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 17px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
Discussion courtesy of: Carlos Martins

This recipe can be found in it's original form on Stack Over Flow.