Get
border back after CSS reset

Question

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:

Do browsers actually render <fieldset> sans reset differently?
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

You can use a !important declarations after each property in css. — Exor, Jul 05 '12 at 04:48
@Exor `!important` is almost always a sign of someone who doesn't have a clue what the ---- they're doing! — Niet the Dark Absol, Jul 05 '12 at 04:51
@Kolink: Oh my i thought, An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has.Any way thanks for the tip :) — Exor, Jul 05 '12 at 04:56

score 4 · Accepted Answer · answered Jul 05 '12 at 04:51

4

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!

answered Jul 05 '12 at 04:51

Niet the Dark Absol

320,036
81
464
592

2

Losing the native UI style is exactly why people use a reset – Kulvar Nov 07 '17 at 10:34
@Kulvar But that's bad. Native UI helps maintain familiarity with users. – Niet the Dark Absol Nov 07 '17 at 13:29
1

People don't care that people are accustomed with the native UI, people want their website to be beautiful. Native UI is not beautiful, so native UI is override. Sometimes with extra DOM and JavaScript when you must change the look of form elements. They pay for that, so we do that. – Kulvar Nov 07 '17 at 16:08
@Kulvar I'll just leave [this](http://motherfuckingwebsite.com/) here then. – Niet the Dark Absol Nov 07 '17 at 17:18
I love the content of that website, but the design is lacking :) – Kulvar Nov 09 '17 at 15:21

score 2 · Answer 2 · answered Jul 25 '14 at 20:38

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 */
}

Get border back after CSS reset

2 Answers2

Get
border back after CSS reset