Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with two styles to a contact form, please. Reply To: Help with two styles to a contact form, please.

#175365
paulob
Participant

Hi Michael,

Unfortunately form controls have historically been tied closely to the os and the browser that displays them and have often been designed by the UA (user agent) to fit in with the style scheme of the browser.

Many of the standard effects and design elements that you see on form controls are not available for styling and are pre defined by the browser. This has been a bugbear for many years.

Once you start styling the form control you lose some of the pre-defined browser defaults (as you have already noticed) but as mentioned there are only certain things that can be styled anyway and this varies greatly between browser. Suffice to say that the opportunities for styling complex form controls like selects are limited. You can controls things like colour and background but you can’t change the appearance of a select much more than that with standard css. (Even height for selects is not supported in older versions of IE.)

There is hope on the horizon and there are a lot of pre-fixed vendor specific rules that you can use these days for changing the default appearance of form controls but they are quite complex and vary between browser.

As I mentioned in my post above the only consistent way to style a select is to use JS and swap it out for a normal list which you can style as you want. The JS then handles the data swapping in the background.

There is also the issue of that if you change the appearance of a form element then a user may be confused as to what its purpose was. Form controls were originally designed so that they were consistent in all applications (for that browsers and OS) and users would always know what to expect and how to use the element.

In the end you do what you can :)