I decided quite a while ago, probably about 18 months ago, that I wasn’t going to attempt to style form controls any more.

This was based on my personal experience and my personal preference - I think your average user appreciates being able to easily identify a text box, a form button etc. - as forms can be confronting beasts to some people. If you leave all the form controls in their default style in the users chosen browser then at least they can readily and quickly identify and understand them.

This is always something that the designer in me (and designers and other colleagues I work with) naturally (and usually subconsciously, on my part) fight. Quite often I end up styling form controls (buttons especially) in my design mock-ups and by that point it’s harder to let go of them.

I have in the past on numerous occasions thought "I wish that all browsers would allow me to do whatever I want with form controls" but that thought soon passed when I thought about some of the hideous monstrosities that would allow people to create, I’d never even contemplated the why and how it would be implemented by the browser or in CSS. Eric Meyer, on the other hand, has thought about it. It’s a very long post but defiantly a worthwhile read if this is something you’ve ever had to face.

Comments

There have been 2 comments so far, join the discussion.

1. lewis - 31st May 2007 - 3:02 am

i saw something along these lines (http://www.456bereastreet.com/archive/200409/styling_form_controls/) somewhere else, where there was a MASSIVE combination of form field input attributes/inputs/fields, but couldn’t recall it to post.

styling forms = completely pointless. it’s not big or clever and you always end up coming off looking like a fool. let the browsers do the work for once.

2. shafia - 5th Jun 2007 - 6:21 pm

hi i am using publisher to create my website i have added a form and published it on the web i keep getting a error message saying the URL has been removed and the form does not work

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)