Community Project: Style a Simple Search Form

The last community project was so successful I reckon we should make them a regular thing. This month, I want to see what you can do with a simple search form! Send your CSS over and worthy examples will be published on the site next week. Read on to find out more!

You can use whatever techniques you want, as long as they happen through the magic of CSS

This is Easy

I’m going to give you a simple piece of markup (a search input and button) which you’re free to style in any way you please. Here’s the markup (download it wrapped up as an html file if you want):

<form>
	<input type="search" placeholder="What are you looking for?">
	<button>Search</button>
</form>

Search inputs and buttons present us with some hefty challenges, but great potential. What do you think you could do with them, using the power of CSS? Here are two really basic examples, just so you get an idea of what we’re doing here.

Anything Goes

You can’t touch the HTML, without exception. But there’s loads you could do to style this search form via CSS!

• Play with the colors
• Alter the fonts (use @font-face if you want)
• Play with the Placeholder
• Add some dynamic content with pseudo elements
• Go bonkers with the button
• Blow us away with transitions
• Even use textures and images if you want (just make sure you zip the whole lot up when you send it over)

The only thing you need to bear in mind is that the demo page already has its styles reset with normalize.css.

Sign Me Up!

This couldn’t be simpler:

• Download the basic files
• Alter the styling in any way you want
• Include any personal details and a description about what you’ve done
• Zip your file(s) up and send them to me!

I’ll publish the best ones when I’ve collected a few. This can be on-going too – there’s no deadline.

I look forward to seeing what you all come up with! Good luck!