How to put label on input like fieldset of HTML tag

Question

I saw this question: How to make irregular CSS border

and my question is that there is anyway to make input and label as this design somehow? thanks,

Answer 1

You can make it with changing the CSS file. With just using <label> and <input> and add some CSS class to it.

.input-field {
  display: flex;
  flex-direction: column;
  width: 500px;
}
.input-field label {
  margin-left: 10px;
}
.input-field label .label-style {
  background: #FFF;
  font-weight: bold;
  padding: 0 10px;
}
.input-field input {
  height: 30px;
  margin-top: -10px;
  z-index: -1;
  padding: 10px 20px;
  border-radius: 10px;
}

<div class="input-field">
  <label for="name"><span class="label-style">Full Name</span></label>
  <input type="text" placeholder="Name" name="name">
</div>

For using it with SCSS you can refer on the codepen here