I have placed a PHP Feedback Form on this page and styled it with the action Form Elements CSS.
But items such as menu/list maintain rounded corners and an opaque 3D shadowed appearance. Do I have to accept this or can they be styled to match the text fields and text areas? (In this instance square corners and with a background image)
The CSS won’t affect the PHP, if that’s what you’re asking. But any
time you styles a form input to the point that it no longer resembles
a default form input for the given platform, you have to accept that
you are degrading the user experience in the name of visual style.
Form elements may be ugly, but they are recognizable as form inputs to
a vast majority of Web users. Recognize the trade-off you are making;
realize that you will no doubt be turning away some people who might
otherwise find your site usable.
Walter
On Jan 27, 2011, at 1:49 PM, Richard Lowther wrote:
I have placed a PHP Feedback Form on this page and styled it with
the action Form Elements CSS.
But items such as menu/list maintain rounded corners and an opaque
3D shadowed appearance. Do I have to accept this or can they be
styled to match the text fields and text areas? (In this instance
square corners and with a background image)
Point taken Walter. Hopefully my styling is not too far out (matching up the lightly textured background inside a text field or area to the page background) to throw anyone off the scent. But (just out of curiosity and I suppose stubbornness) is it possible to restyle the element which gives you a drop down list. The Form Elements CSS action will change its body colour and outline colour but gives no way to remove either rounded corners or the embossing.
If I am being an donkey just say so if its quicker
It is a system thing rather than a design thing in Windoze (as it is on a Mac) - just so happens that on a PC they look pretty utilitarian. But that is the way that they (windoze users) are used to seeing them.
trying to style form controls to look the same across platforms is often a waste of time. Leave them to the browser/operating system defaults, or do only very light styling. That way you will save yourself and your site’s visitors a lot of frustration.
In Webkit you can use the -webkit-appearance: none; style to remove the default border and 3D look of the select list item in Safari, Webkit, Chrome etc.
In fact you can play some really nice tricks with this and background images to make your menu look like anything you like. Here’s a very quick example; http://www.freewayactions.com/test/webkit-menu-mask/
Thanks Dave for that reference which has taught me something, and, together with Walt’s comments, lead me to the conclusion that I should not mess too much with a form. And thanks Tim for the Webkit idea which I hope to find time to explore, (despite what I have just said above!).