Comments (14)
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
andlegend
altogether in lieu of another type of form field container, or - Make
fieldset
andlegend
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.
from cssremedy.
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.
from cssremedy.
The proposed styling makes <legend>
s kinda weird, especially if you use <legend>
or have multiple.
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.
from cssremedy.
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.
from cssremedy.
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).
from cssremedy.
^ 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.
from cssremedy.
I think another reason is that fieldset
elements cannot be display: flex
๐ข
from cssremedy.
Or display: grid
, though so far as Iโm aware, this is an implementation bug and not a spec limitation.
from cssremedy.
@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.
from cssremedy.
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
from cssremedy.
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.
from cssremedy.
@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?
from cssremedy.
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...
from cssremedy.
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.
from cssremedy.
Related Issues (20)
- Twitter/social media accounts HOT 1
- vertical-align and alt text HOT 1
- Text Underline position for CJK lang
- height 100% or 100vh on body & html? HOT 11
- Cater for "hidden" attribute HOT 1
- Path to v1.0? HOT 2
- Audio tag without controls should not be `display:block` HOT 1
- `display:block` negates `vertical-align` HOT 6
- `article, etc. {display:block;}` is not enough for oldIE HOT 6
- white-space:pre-wrap vs. overflow:auto for `pre` HOT 2
- Relation to normalize/sanitize.css HOT 1
- Image causes unexpected if used inside intrinsic parent
- svg display attribute ignored HOT 2
- `inert` attribute remedy? HOT 1
- CSS Remedy without specificity HOT 8
- Suggestion: Body centering (with code suggestion) HOT 4
- Opt out of `monospace` font-size quirk
- Preflight img {display: block}
- Is this project dead? HOT 1
- Is this ready for production? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cssremedy.