Fieldsets styling.

Fieldset legends are displayed like containers in Seven. However, several browsers do not support styling of LEGEND elements. To achieve the desired styling:

  • All fieldsets use 'position: relative'.
  • All legend labels are wrapped in a single span.fieldset-legend that uses 'position: absolute', which means that the LEGEND element itself is not rendered by browsers.
  • Due to using 'position: absolute', collapsed fieldsets do not have a height; the fieldset requires a 'padding-top' to make the absolute positioned .fieldset-legend appear as though it would have a height.
  • Various browsers are positioning the legend differently if there is a 'padding-left'/'padding-right' applied on a fieldset and inherit the positioning even to absolute positioned elements within; we therefore have to apply all padding to the inner .fieldset-wrapper instead.