Grooveshark Search with CSS3

I am a huge fan of the Grooveshark interface. Every time I look at the site I start to dissect the UI and turn it into code in my head. I wanted to see if I could create the search box only using HTML and CSS. Sadly there is one image and it’s the search icon in the button.  I recently read a tutorial that shows you how to create a custom font and use the font-face property for icons, but they didn’t have the search icon I needed.

The Grooveshark Search Box

The above image is my final attempt.  You can also checkout a working demo.

The Structure

I wanted to keep the front-end code really light and still make it easy to theme and have a flexible width.

<form action="#" id="search_box">
	<div class="wrapper">
		<input type="text" id="search" name="search" placeholder="Search for Music" />
		<button type="submit" class="search_btn"><img src="search_icon.png" title="Search" /></button>
	</div>
</form>

I start with a simple form tag and give it an id of “search_box”. Then I have a div that acts as a wrapper.  This creates the full white background behind the input field.  For the input field I’m using the new HTML5 placeholder attribute which is currently only supported in Google Chrome. I’m using a button element because they are easier to style and give you more control cross browser. The button has an image inside with the title tag set for accessibility.  I kept it pretty light and as you’ll see CSS3 offers you a ton of options.

The Sexy

I love the new properties that are coming out in CSS3. I hate managing them. Let me stand on my soap box quickly and ask the developers who create browsers for a living to please talk to other developers.  If you all implement box-shadow with the same formatting please also support using the proper attribute name.  It’s just ugly.

…and now back to the sexy.

I started with styling the form tag by referencing its id of “search_box”.  For those who don’t know the id is represented in CSS by the # or hash/pound symbol.

#search_box {
	background:-moz-linear-gradient(top, #ffd73a, #ffa500);
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffd73a), to(#ffa500));
	border:1px solid #d28703;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);
	-webkit-box-shadow:inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);
	padding:9px;
	width:570px;
}

I am personally not a fan of writing css stacked like this, however, with all the -vendor- declarations it can get really messy. The cool part in the above section is the use of gradient backgrounds and box shadows.  For my gradients I usually set a fairly basic color-a to color-b style.  I then create accent colors with box-shadow.  This allows you to achieve the 1px glows by using the inset property. On the form tag alone I’m using 3 different box shadow styles…I love box-shadow :)

Next I styled the .wrapper class.

#search_box .wrapper {
	background:#fff;
	border:1px solid #d28703;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;
	padding:13px 0 10px 8px;
	position:relative;
}

The wrapper creates the white box surrounding the input field and the button. I’m setting the input field’s border to none so the backgrounds will blend together creating a seamless effect.

#search_box input { border:none; color:#333; font:bold 24px Helvetica, Arial, sans-serif; width:510px; }
#search_box button {
	background:-moz-linear-gradient(top, #453e26, #000);
	border:1px solid #000;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-moz-box-shadow:inset 0 -2px 3px #193544, inset 0 1px #907817, 0 1px 1px rgba(0,0,0,4);
	-webkit-box-shadow:inset 0 -2px 3px #193544, inset 0 1px #907817, 0 1px 1px rgba(0,0,0,.4);
	cursor:pointer;
	height:45px;
	position:absolute;
	right:2px;
	top:2px;
	width:45px;
}

The button tag allows you to customize everything about it.  I absolutely positioned it to the bottom right by 2px to make it stay in the same place regardless of the size of the containing element.

Taking It A Step Further

As I mentioned above I was using the placeholder attribute in the input field. Since this is only currently supported in Google Chrome I have to replace that value in all other browsers.  I wrote a quick jQuery function to mimic the placeholder functionality. This way as browsers start to implement the placeholder attribute I can simply remove a JavaScript function.

$(function() {

	var $placeholder = $('input[placeholder]');

	if ($placeholder.length > 0) {

		var attrPh = $placeholder.attr('placeholder');

		$placeholder.attr('value', attrPh)
		  .bind('focus', function() {

			var $this = $(this);

			if($this.val() === attrPh)
				$this.val('').css('color','#171207');

		}).bind('blur', function() {

			var $this = $(this);

			if($this.val() === '')
				$this.val(attrPh).css('color','#333');

		});

	}

});

The first thing I always do is declare my variables. In this case I grab all the input fields with the placeholder attribute set. I then run a quick check to see if any elements exist and if so set a few variables and bind a few events.  Again always start by defining your variables. I first grab the value of the placeholder attribute and then create a value attribute on the input element with the value of the placeholder.  This allows me to use a new HTML5 property and provide a fall back until full support is provided.

Next I bind my focus event. This fires every time a user clicks or tabs into the form element. What am I doing first? That’s right…declaring my variables. I have gotten into the habit of using the $ to signify a jQuery object.  This quickly lets me know if I’m dealing with a value such as a number or string, or if I’m am dealing with an object. I then run a quick check to see if the values match. If so, I clear the value attribute. Then when the user blurs or clicks off the field the logic simply is reversed. By checking to see if the value is the same or completely blank I avoid overwriting user input.

Let me know if the comments what you think and feel free to use and manipulate the code. Enjoy!

26 thoughts on “Grooveshark Search with CSS3

    • I still don’t have one yet and didn’t think to test on my iPhone. I’ll post an update if I can get around to debugging those issues.

      Thanks for the feedback…also, if you’d like to send me an iPad I’m down :)

  1. Pingback: Una barra di ricerca in stile GrooveShark con i CSS3! | sastgroup.com

  2. Pingback: Una barra di ricerca in stile grooveshark con i css3!

  3. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.43) - Speckyboy Design Magazine

  4. Hey,
    Really good work!

    I’d perhaps suggest using a label in place of your wrapper for more semantic meaning, but everyone’s got their own opinion =)

    Re: iPad: Mobile Safari on iPad doesn’t support ‘border-radius’, this could well be your problem. Make sure you specify it with the proper vendor prefix (-webkit-border-radius) for it to work on the iPad =)

    • This appears to need some pretty serious tweaking to work properly in IE*. Yeah… I know. IE stinks. I have to work around it all day. However, as a designer/developer, you have to know that you need to take IE into consideration even if you have a designer/developer-oriented site, as IE still dominates the browser market.

      That said, this is a clever bit of coding, and I am going to see what I can do to make this not look like an abomination on IE, while still retaining its great coolness in the other browsers.

      On a related note, I am listening to Grooveshark as I type. Without it, I would accomplish nothing in the day. I really need to man up and get VIP to support these guys, and hopefully keep it in business for a loooong time (how they’ve managed to stay in business, pay the bills, AND avoid a takedown by the RIAA, I’ll never know. It must be magic…)

  5. Pingback: Apple Navigation with CSS3 | Design in Development

  6. Pingback: Replaceholder jQuery Plugin | Design in Development

  7. Pingback: June’s Best Resources for CSS3

  8. Pingback: The Ultimate Roundup of 55+ CSS3 Tutorials

  9. Pingback: Showcase of Inspiring Search Box Designs - Noupe Design Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>