4 Simple CSS Tricks to Make Web Input Fields Look Better

Most web sites will have an input form somewhere even if it is nothing more than a contact form.   Any web application will have lots of input forms.

Regardless of why you have the input form or what it is prompting form, we should strive to have them look as nice as possible to keep the user visually engaged.

So here are a few CSS tricks we can use to make an input more visually engaging, less intimidating, and hopefully a little easier to use.

Let’s start with a simple unassuming input form for entering search criteria:

Image may be NSFW.
Clik here to view.

1. Padding is our friend

   By adding a little padding to the left, the input values are not crammed against the left most border.    This will help make the form seem less compressed and will enhance white space.   I find that half an em works nicely

   Image may be NSFW.
   Clik here to view.

    

2. Round the Corners

   Rounded corners can help to soften the look of a harsh collection of rectangles for input fields.    We don’t have to round them by much unless that is the look you are going for.   Even something as subtle as adding a .5em border radius can make a subtle but nice addition, softening the edges

   Image may be NSFW.
   Clik here to view.

3. Add focus

   By using the :focus selector, you can make it easier for the user to track where they are. You can set the back ground color, add a box shadow, or whatever fits into the theme and look and feel for your site. One key thing to remember is that you don't want your page to have to reflow as the individual controls get focus so you may want to avoid changing the font or padding, etc.    Here I added a :focus selector to add a gradient color to the background and change the font color as well as add a box shadow.

   Image may be NSFW.
   Clik here to view.

4. Add a little Color

   No where is it written that the input fields must be white.   Have some fun.   You have many options:

   Try a solid background:

   Image may be NSFW.
   Clik here to view.

   or a subtle gradient

   or a background image

   Experiment and see what looks best in your application.

For most of my sights, I use something similar to this changing the actual values based on the color scheme I am using.

   1:  input[type=text] {

   2:      height:1.5em;

   3:      padding:5px 5px 0px .4em;

   4:      margin-bottom: 10px ;

   5:      border-radius:.5em;

   6:      -moz-border-radius:.5em;

   7:      -webkit-border-radius:.5em;

   8:      text-transform:none;

   9:      width:150px;

  10:      background:#5E768D;

  11:      background:-webkit-gradient(linear, left top, left 25, from(#FFFFFF), 

  12:              color-stop(4%,#c6d1da), to(#5E768D));

  13:      color:#fff;

  14:      font-size:1.1em;

  15:  }

  16:  input[type=text]:focus{

  17:      box-shadow:3px 3px 10px #446;

  18:      outline:none;

  19:  }

For drop down lists, I recommend Chosen.

How do you style your input controls?