Material Design Input Field Using CSS

This code creates a stylish Material Design input field using CSS. It’s designed to enhance form inputs visually. The CSS creates a smooth transition effect for placeholder text, adds a sliding bar beneath the input when focused, and animates the label to float above the input when it’s active or filled. Moreover, this design improves the user experience by providing visual cues and a sleek appearance for input fields.

How to Create Material Design Input Field Using CSS

1. First of all, create an HTML file and set up the basic structure. You’ll need a form with an input field and a label. The form contains a fieldset with the class material, an input field, an <hr> tag acting as an underline, and a label.

<form>
	<h2>CSS Material Input Field</h2>

	<fieldset class="material">
		<input type="text" placeholder="John Doe" autocomplete="off" required>
		<hr>
		<label>First Name</label>
	</fieldset>
</form>

2. After that, save the following CSS code in a file named styles.css and link it in your HTML file’s head section as shown above. The .material input styles define the appearance of the input field – removing default borders, adding a bottom border, setting placeholder transitions, and more.

Similarly, the .material label styles handle the floating label effect when the input is focused or has content.

html,
body {
  font: 14px/1.21 Roboto, 'Helvetica Neue', arial, helvetica, sans-serif;
  background: #EEE;
}
form {
  margin: 20px;
  padding: 20px;
  background: #FFF;
}
.material {
  position: relative;
  padding: 0;
  margin: 5px;
  border: none;
  overflow: visible;
}
.material input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 10px 8px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #DDD;
  font-size: 120%;
  outline: none;
  cursor: text;
}
.material input::-webkit-input-placeholder {
  -webkit-transition: color 300ms ease;
  transition: color 300ms ease;
}
.material input:not(:focus)::-webkit-input-placeholder {
  color: transparent;
}
.material hr {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 2px;
  border: none;
  background: #607D8B;
  font-size: 1px;
  will-change: transform, visibility;
  transition: all 200ms ease-out;
  transform: scaleX(0);
  visibility: hidden;
  z-index: 10;
}
.material input:focus ~ hr {
  transform: scaleX(1);
  visibility: visible;
}
.material label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 120%;
  color: #607D8B;
  transform-origin: 0 -150%;
  transition: transform 300ms ease;
  pointer-events: none;
}
.material input:focus ~ label,
.material input:valid ~ label {
  transform: scale(0.6);
}

That’s all! hopefully, you have successfully created input field in your forms. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.