Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.

The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

Google’s search box is wide enough to accommodate long sentences.

Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”

In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.

Create Custom Search Bars with Image Replacement using CSS
The incorporation of custom elements, like search boxes, can set your website apart from its competitors. This tutorial covers how to add a custom search bar to your site, though it’s not cross-browser compatible.

Fancy Form Design Using CSS
This article covers form styling with CSS.

Designing The Search Submit Button – A CSS Cross-Browser Compatible Solution
Learn how to create a custom image like a magnifying glass, or the word ‘GO’ in a circle, instead of the default search submit button.

Making Forms Convert Through Awesome Inline Labels
This tutorial shows how to increase form follow-through by using better inline labels.

CSSG Collections: Web Forms
This is a collection of uniquely designed web forms available to use for free.

45+ Really Essential Free HTML [Form] Enhancements
This collection of free form enhancements covers a number of CSS techniques.

minimal form layout/quick css tricks
This post gives some quick CSS tricks for minimalist form layout and design.