CODEWITHSUNDEEP
cssfieldsetcss-reset
Leftium
Leftium

Reputation: 17903

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

Upvotes: 1

Views: 4039

Answers (2)

aked
aked

Reputation: 5815

I had similar problem - what i did it i copied the style from Normalize.css stick this after the css reset

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

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!

Upvotes: 4

Related Questions