Bulma: Feature: fieldset and legend tags styles

[mdesantis]

Feature: fieldset and legend tags styles

This is about the Bulma CSS framework
I'm using Bulma 0.4.3
I am sure this issue is not a duplicate

Description

At the moment, fieldset and legend HTML tags are unstyled, so they look ugly. They are not popular tags anymore, but they are still quite important in admin forms.

At the moment I'm using this, which isn't too bad:

.fieldset
  @extend .box
  border: 0 none
  > legend
    @extend .label
   background-color: $white
    padding: 0 5px

Steps to Reproduce

1. Write this inside an HTML page using Bulma:

<fieldset class="fieldset">
  <legend>Legend</legend>
</fieldset>

1. Look at it

Expected behavior

It doesn't look ugly

Actual behavior

It looks ugly

[Potherca]

I had the same issue, using the HTML below gave an okay result:

<fieldset class="box">
  <legend class="label has-text-centered">Legend</legend>
  <!-- ... -->
</fieldset>

[danswiser]

I've done the same however the following felt neater to me:

<legend class="subtitle is-3">Legend</legend>

[Cethy]

Adding content to fieldset class adds the right padding.

[james-wasson]

This is what I have currently:

fieldset.box > legend
  padding: 0 2px
  background-repeat: no-repeat
  background-image: linear-gradient(transparent calc(50% - 1px), $box-background-color calc(50% - 1px))

The issue being that the box shadow variable is defined like:

$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default

So the 1px offset will not always be enough to handle this case.
I could always add position: absolute and move the legend around but I'm not sure that's the best solution.
@jgthms @oupala any thoughts?

[oupala]

No particular thought for me. I'm not an expert enough to tell what is the best solution. Sorry...

[anejjar]

HTML

<fieldset class="fieldset">
     <legend>legend</legend>
</fieldset>

CSS

.fieldset{
   background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
   border: 1px solid #ccc
}
.fieldset  > legend{
    color: #363636;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    background-color: #fff;
    padding: 0 5px;
    width: max-content;
    border: 0 none
}

result

[cperrin88]

I have achieved very good results by using the following SASS for the fieldset:

$fieldset-color: $text-strong !default
$fieldset-background-color: $scheme-main !default
$fieldset-border-color: $border !default
$fieldset-radius: $radius !default
$fieldset-padding: 1.5em

.fieldset
  @extend %control
  background-color: $fieldset-background-color
  border-color: $fieldset-border-color
  border-radius: $fieldset-radius
  color: $fieldset-color
  padding: $fieldset-padding
  &.is-expanded
    width: 100%
    flex-grow: 1
    flex-shrink: 1

and using the .label class for the legend element. Maybe this a good solution for everyone searching to use the bulma styles.