Grow your CSS skills. Land your dream job.

A reset for forms?

  • gno
    # June 13, 2011 at 12:01 pm

    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?

    # June 13, 2011 at 12:39 pm

    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
    # June 14, 2011 at 2:56 am

    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 :-)

    # March 29, 2013 at 4:26 pm

    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
    }

    # July 4, 2013 at 11:49 pm

    very useful, thanks!

    __
    # July 5, 2013 at 12:37 am

    ####oneWord[normalize](http://necolas.github.io/normalize.css/)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".