logo

Giving Some Visual Meaning To Input Fields

Forms on the web are, for the most part, boring and without design.

Earlier today I was knocking together a simple form for a Contact/person document and thought I'd add some visual appeal by styling the primary input box on the form:

image

Hopefully now, when the user is editing contacts it will be more apparent exactly what it is they're editing.

Changing the font size of individual inputs is never something that's crossed my mind till now. I think it works quite well, don't you?

To do this is, as you'd imagine, very simple. The input in the shot above has the CSS class "big". In the CSS there's then a

input.big{
  font-weight:bold;
  font-size:1.3em;
}

Simple, but effective. My favourite kind of tips.

Comments

  1. I can see this aiding form input on mobile devices by adding and removing the .big class to inputs onFocus and onBlur. Sort of an on-demand zoom.

      • avatar
      • Flaz
      • Tue 22 Mar 2011 07:40 AM

      In my opinion it's quite annoying since the height of the fields increase and decrease, moving all content next to it up and down...

      Show the rest of this thread

      • avatar
      • Baiju Thomas
      • Tue 22 Mar 2011 03:41 PM

      Jerry,

      Not sure about the mobile devices. But in IE(8 and above, with doctype) and other modern browsers, a :focus pseudo-class for the input will work. No need to add/remove in onfocus/blur.

      like

      input:focus{

      font-weight:bold;

      font-size:1.3em;

      }

      But changing the size on focus could be annoying..

    • avatar
    • Ben
    • Tue 22 Mar 2011 05:47 PM

    I've always tended to use a background colour (e.g. light yellow) to highlight a field currently selected.

    I also use this for validation, so that when a field is exited, if the field value is invalid, it makes the background light red, or light green for a valid input.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 21 Mar 2011

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content