Geeks With Blogs

News Google

Nick Harrison Blog<Nick>.Next()

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:


  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



  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


  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.


  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:


    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?

Posted on Tuesday, March 19, 2013 2:07 PM Stylish musings | Back to top

Comments on this post: 4 Simple CSS Tricks to Make Web Input Fields Look Better

comments powered by Disqus

Copyright © Nick Harrison | Powered by: