Remove the default styling of fieldset?

[jensimmons]

Why don't people use <fieldset> far more — instead of divs in their forms?

Perhaps it's because fieldset comes with ugly default styling.

Maybe we should remove it?

fieldset {
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    border: none;
    min-inline-size: min-content;
}

[jensimmons]

^ that works in Firefox. I didn't test cross browser.

Maybe we put this in the main remedy stylesheet. Maybe we put it in suggestions. Let's think about it.

[adamwathan]

I think another reason is that fieldset elements cannot be display: flex 😢

[meyerweb]

Or display: grid, though so far as I’m aware, this is an implementation bug and not a spec limitation.

[dbaron]

In Gecko, fieldset is its own display type because of the stuff needed to support legend (positioning the legend, making a gap in the border, leaving the right amount of space for the legend). But it consists of a wrapper that supports the legend, border, etc., and then an inner box that (depending on display) is either block, flex, or grid. I'm not sure what other browsers do... and it's also not like there's a spec (or tests) for how fieldset interacts with CSS, so I'd expect tons of browser differences.

[jensimmons]

@dbaron Is fieldset super old?? Therefore underspecified and lacks interop?

I'm testing fieldset's interaction with Grid now, and it seems fine... oh, but I have only tested Firefox. Maybe.... hm.

[dbaron]

Depends on your definition of "super old", I guess. I think it was introduced in HTML 4.0, which was 1997. It's certainly underspecified and lacks interop, though.

[Sora2455]

I think the main reason people don't use fieldset very often is because its only useful if you want to add a legend (the design team usually has their own, non-semantic ideas about that) or disable the entire form with one attribute (not usually needed).

[arp242]

The proposed styling makes <legend>s kinda weird, especially if you use <legend> or have multiple.

Default behaviour

With the proposed change

---

The border is one of those outset (or inset?) borders in Firefox, and 2px wide in Chrome. It looks ... un-modern.

Personally, I think something like just fieldset { border: 1px solid #aaa; } would make more sense; the entire point of using fieldsets is to separate out form sections, so removing all borders seems to be throwing out the baby with the bathwater.

[frfancha]

fieldset is used because it allows you to set a bunch of fields as enabled/disabled in one shot
then yes its only child will be a div to be able to use flex or grid...
the fields are great-children of the fieldset, children of the div

[SGP57]

I've arrived here because of looking to disable a fieldset but not have the border so I agree with @frfancha . It may not have been the original design intention but being able to put a fieldset "around" a group of elements to disable/enable in one step looks useful. My (working in Chrome) example is around a ul which cannot be disabled and is not in a form - I was looking for the disabling and not the presentation aspects of fieldset; border: none and padding:0 seem to remove the visual side.

[Sora2455]

@SGP57 Can I suggest that if you need an "invisible" fieldset like this, you set the CSS selector to: fieldset[role="presentation"] to enforce proper aria markup?

[dougc84]

Just chiming into this conversation, as I just stumbled upon this. I run a large production app with Bootstrap 3, which, of course, has its own set of resets native to the framework. We use fieldset all the time successfully as a way of grouping fields, and it's an aid to those with screen readers. In BS3 with our many, many additions, it acts similar to a div.

However, for some reason or another, we had to skip legend. I don't remember the reason exactly, but I'm pretty sure it had to do with styling. That's not optimal either, and I think there are two options to make this work:

• Deprecate fieldset and legend altogether in lieu of another type of form field container, or
• Make fieldset and legend actually work with modern browsers.

Personally, I think we'd be better off with a new set of elements at this point to not break existing compatibility with sites that use fieldset and legend, something like:

<fieldgroup aria-describedby='#thing1'>
  <h4 id='thing1'>Basic information</h4>
  <!-- fields -->
</fieldgroup>

<!-- or -->

<fieldgroup aria-label="Basic information">
  <h4>Basic information</h4>
  <!-- fields -->
</fieldgroup>

I mean, we have a bunch of HTML5 tags that have very specific use like <meter> and <hgroup> and <dialog>. So why not? But that means talking to the people and groups that make the rendering engines to support this type of markup, getting it implemented in browsers, and polyfills for backwards compatibility... so... 2030, anyone?

But, for today, we use something like the following:

fieldset {
  border-bottom: 1px solid #eee;
  margin-bottom: 21px;
  padding-bottom: 10.5px;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

That seems to work well going back to IE8, though, of course, doesn't fully notify a user with a screen reader what those fields actually are, because legend support is lacking as well.

[kmorte]

I like the concept of the fieldset, but not fully supporting display flex is what makes me remove fieldset every time I use it. For some reason I still need to try it, google it and come in this thread over and over...

[macgyver]

I like the how the fieldset border goes through the legend by default, but I wish there were a way to prevent it from happening sometimes. It's not stopping me from using fieldset, but it is making it more difficult to implement designs at times.