Search code examples
htmlcssinputresponsive-designmaterialize

CSS Input field design

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

enter image description here

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.