How to Create Material Style Input Fields with Only HTML and CSS

Material Design is a design language created by Google that is used to create user interfaces that are both beautiful and functional. One of the key elements of Material Design is the use of input fields. Input fields are used to collect user input, such as text, numbers, and dates.

In this blog post, we will show you how to create material style input fields with only HTML and CSS. We will start by creating a basic input field, and then we will add some styling to make it look more like a material design input field.

How to Create Material Style Input Fields with Only HTML and CSS

Preview:

Username

Step 1: Create a Basic Input Field

To create a basic input field, we will use the following HTML code:

  <label for="input" class="label">
    <input id='input' type="email" placeholder=" " />
    <span class="placeholder">Username</span>
  </label>
  

This code will create an input field with the type "text" and the name "Username".

Related Posts

Step 2: Add Styling to the Input Field

Now that we have created a basic input field, we can add some styling to make it look more like a material design input field. To do this, we will use the following CSS code:

 :root {
  --inputtextpadding: 1.1rem;
  --bg: #212121;
  --primary: #8774e1;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  font-family: "Roboto", sans-serif;
  overflow: hidden;
}

.label {
  position: relative;
}

.label input {
  display: block;
  background: transparent;
  padding: var(--inputtextpadding);
  border-radius: 10px;
  width: 100%;
  max-width: 20rem;
  height: 54px;
  outline: none;
  font-size: 16px;
  border: 1px solid #2f2f2f;
  color: #fff;
}

.label input:hover {
  border-color: var(--primary);
}

.label input:focus {
  border: 2px solid var(--primary);
}

.label .placeholder {
  font-size: 16px;
  position: absolute;
  width: calc(100% - (var(--inputtextpadding) * 2));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  top: 27px;
  left: 10px;
  transform: translateY(-50%);
  color: #9e9e9e;
  transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
  pointer-events: none;
  user-select: none;
  line-height: 1.3125;
  padding: 0 5px;
}

.label input:not(:placeholder-shown),
.label input:focus {
  transition-delay: 0.1s;
}

.label input:not(:placeholder-shown) + .placeholder,
.label input:focus + .placeholder {
  top: 2px;
  font-size: 11px;
  color: var(--primary);
  background: var(--bg);
  width: auto;
}

.label input:not(:focus) + .placeholder {
  color: #9e9e9e;
}

.label input:hover + .placeholder {
  color: var(--primary);
}
  

This CSS code will add a border, padding, and width to the input field. It will also change the color of the placeholder text.

Full source code

input_field_with_floating_label.zip ZIP 1.5 KB .zip

Conclusion

In this blog post, we showed you how to create material style input fields with only HTML and CSS. We started by creating a basic input field, and then we added some styling to make it look more like a material design input field. We also added a label and a clear button to the input field.

I hope this blog post was helpful. If you have any questions, please feel free to leave a comment below.

Go to Link