A reset for forms?

[gno]

Hi guys,

Normally I avoid styling fonts too much, as I believe that keeping forms look the default way of whatever O/S and browser that you are using is best practice for the sake of usability.

However, in my recent project, I have toyed around with some jquery stuff to do validation and such. I’ve done some styling on the forms (pretty basic stuff in my opinion) but I have had some troubles with browser support.

Opera and Webkit browsers both (or all three of them) comes along nicely. They play the same way at least. But Firefox is making trouble, and I dont even dare thinking about IE.

That made me think, is there a reset css file which would reset all forms to the same looks across all browsers or do I have to dig into conditional stylesheets to solve these oddities?

How do you tackle form styling?

[KarlB]

I tend to just solve per browser when doing my development. IE is beyond screwy but if you use basic styles such as positions you should be able to address issues. I could help you with what is going wrong with your styles in FF if you post them.

[gno]

Thanks for the offer Karl. I’ve got it working the way I want, I just wanted to know if you guys had any special approaches to forms.

There could be some little secret that I hadn’t discovered yet :-)

[joeldom]

This is what i’ve used for a lil while kinda a homebrew verison

//FORM RESET

textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-background-clip: padding;

-moz-background-clip: padding;

background-clip:padding-box;

-webkit-border-radius:0;

-moz-border-radius:0;

-ms-border-radius:0;

-o-border-radius:0;

border-radius:0;

-webkit-appearance:none;

background-color:#fff;

color:#000;

outline:0;

margin:0;

padding:0;

text-align: left;

font-size:1em;

height: 1em;

vertical-align: middle;

}

select, select, select{

background:#fff url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);

background-repeat: no-repeat;

background-position: 97% center;

padding:0 25px 0 8px;

font-size: .875em

}

[schlagobers]

very useful, thanks!

[Author]

Posts