Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Workshops

Community Project: Style a Simple Search Form

Read Time:2 minsLanguages:

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):

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:

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!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.