CSS Input field design

Issue

I need to make a input box like the image below.

I'm using materialize and CSS.

Solution

You can try to use fieldset in your form element.

<fieldset>
  <legend>
    <label for="username">Username</label>
  </legend>
  <input type="text" id="username" name="username">
</fieldset>

After that, you can try to edit your styling in your css. Probably to take out the border of the input and change the width of the box.

Answered By - Sunny