Question

A fellow developer has set the following css rule, which must remain in place.

* {
    border: medium none;
    list-style: none outside none;
    margin: 0;
    outline: medium none;
    padding: 0;
}

This removes the border from SELECT and INPUT fields and makes them look less than ideal. If I remove the border style in firebug then the fields look normal again. Which css rules must I add to revert back to the default styles set by the browser?

Edit: these are the styles I’m trying to revert to (on my computer):

_{(source: 456bereastreet.com)}

Answer 1

I think what your fellow developer was attempting to do was create his own reset (similar to Yahoo Reset, etc). But since he’s declaring * instead of specific elements, it removes the border from everything.

You can work around this though and still get the browser’s default border back on form elements by changing the * to your most common elements (sans form elements) – it’s a bit ugly, but it does what you’re looking for:

a,abbr,acronym,address,b,blockquote,body,br,caption,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,i,img,label,legend,li,link,menu,ol,p,pre,small,span,strong,table,td,th,tr,u,ul
{
    border: medium none;
    list-style: none outside none;
    margin: 0;
    outline: medium none;
    padding: 0;
}