cssfieldsetcss-reset

Get <fieldset> border back after CSS reset


Many CSS resets eliminate the <fieldset> tag's border, padding, and margin. I suppose this is to ensure they render uniformly across all browsers. However, fieldsets no longer visually separate groups of HTML (form) elements after the reset.

Two questions:

  1. Do browsers actually render <fieldset> sans reset differently?
  2. What is the best method of getting the 'bordered' look back after a CSS reset? Simply restyling it like this:

    fieldset {
        border: 1px solid silver;
        margin: 2px;
        padding: 7px;
    }
    

Some images of what I am describing:

Without reset: enter image description here

With reset: enter image description here


Solution

  • The easy answer is: don't use a reset! They are unnecessary provided you have a clue what you're doing.

    For instance, if you use a reset then you lose any native UI styles, such as, in this case, fieldsets. In IE, for instance, an unstyled fieldset will have a border with slightly-rounded corners, just like fieldsets in native programs. A reset removes that, and non-native UI sucks.

    However, if you insist, just make sure that the styles are defined in the right order. The reset should be the absolute first thing, followed by "un-resets". See, it's redundant!