Custom fieldset Legend css

Question

How can i recreate the classic behavior of a form with fieldset and legend

<form>
  <fieldset>
    <legend>
      Text
    </legend>
  </fieldset>
</form>

using a div and a label?

<div>
  <label>
    Text
  </label>
</div>

I need the label to have a transparent background.

How can I recreate it in a custom way? Thanks

Answer 1

Not a transparent background, most elements already do that by default. It needs a white background and then just move it up to be on top of the line.

div {
  border: 1px solid #000;
  padding: 10px;
}

label {
  background: #FFF;
  padding: 5px;
  position: relative;
  top: -1rem;
}

<div>
  <label>
    Text
  </label>
</div>