'CSS Input field design [closed]

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

enter image description here

I'm using materialize and CSS.

htmlcssinputresponsive-designmaterialize


Solution 1:[1]

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.

Solution 2:[2]

Basic demonstration using :before.

input {
  border: transparent;
  text-align: left;
}

input::placeholder {
  text-align: center;
}

input:focus {
  outline: transparent;
}

.line {
  border: 1px solid black;
  border-radius: 5px;
  width: fit-content;
  padding: 10px 0px 5px 0px;
}

.line:before {
  content: "username";
  position: absolute;
  top: 0;
  left: 20px;
  background-color: white;
  padding: 0 2px;
}
<div class="line">
<input type="text" placeholder="[email protected]">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron
Solution 2

Related Questions