CSS implements Google Material Design text input box style (recommended)

Hello everyone, today I want to share with you how to use pure CSS to implement the style of the Google Material Design text input box.

Although we have many frameworks today that can help us implement these styles, by learning how to use pure CSS at the bottom level, we can enhance our ability to customize these framework components according to business needs in the future.

Demo, please see here: Click here to see Demo [CodePen]

Final result:

Only tested on Chrome browser. If you find problems with other browsers, you are welcome to provide modification methods and learn and improve together!

Start implementing

First, we create the following HTML:

<form>
  <input type="text" required />
  <label>
    <span>Username</span>
  </label>
</form>

This is a regular HTML form for entering a username.

I believe that everyone who is smart has noticed that we put the <label> tag after the <input> tag because we need to select the <label> later based on the state of the <input> tag. However, they are siblings, and since pure CSS selectors only provide a way to select the next sibling, we put the <label> tag at the end.

Effect picture:

Next, let's customize the CSS effects on the <form> element.

form {
  width: 50%;
  height: 50vh;
  margin: auto;
  position: relative;
  font-family: Sans-serif;
}

There is nothing special about this section of CSS, it just defines the length, height and font.

Next let's add some styles to the <input> element.

form input {
  height: 2rem;
  width: 10rem;
  border: none;
  border-bottom: 0.1rem solid black;
}

This section of CSS mainly sets the length and width, and only sets the border below to give it an underlined feel.

Effect picture:

Next we need to set the <label> tag, which is to move the Username text above the text input box.

form label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

It is worth noting here that we set:

pointer-events: none;

It is hoped that in the future, when the mouse clicks on the text, the text input box focus event can be triggered instead of the font selection event.

Effect picture:

Next we need to add padding-top to the <input> element. This will move the <label> Username up a bit.

Next, we add outline: none to the <input> element so that when we click on the text input box, the blue border will no longer appear.

form input {
  height: 2rem;
  width: 10rem;
  padding-top: 1rem; /* New */
  border: none;
  border-bottom: 0.1rem solid black;
  outline: none; /* New */
}

Effect picture:

Next, we need to apply a bottom border style to the pseudo-element ::after after the <input> element, and move the bottom border to the left.

The reason for moving the bottom border to the left is that it will be hidden in the future through overflow: hidden;. Only when the text input box is selected, the bottom border will be moved back as a means of enhancing the visual impact.

form label::after {
  content: ""; /* This is very important, we need this attribute to display the bottom border*/
  height: 3rem;
  width: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 0.2rem solid #1cb9b6; /* The bottom border needs to be more prominent, so we make it bold and color it*/
  transform: translateX(-100%); /* Translate 100% to the left to ensure it is outside the form element*/
  transition: all 0.3s ease; /* Add animation to achieve smooth movement */
}

Effect picture:

Next we want to make the <label> element Username go down, just on the bottom border.

form label span {
  position: absolute;
  bottom: -3rem;
  left: 0;
  transition: all 0.3s ease; /* animation to achieve smooth movement effect*/
}

Effect picture:

Next we need to style the <input> element when it is in the focused and valid states. That is, when we select the text input box, or when there is text in the text input box, they should be highlighted.

The reason why we can use the valid state here is that in HTML we set the required attribute for <input>, so when there is text in the text input box, it is in a valid state, and vice versa.

<input type="text" required />
form input:focus + label span,
form input:valid + label span {
  transform: translateY(-120%); /* Move Username upwards*/
  font-size: 1.2rem; /* Increase the font size to highlight the highlight effect*/
  color: #1cb9b6; /* highlight color*/
}
form input:focus + label::after,
form input:valid + label::after {
  transform: translateX(0); /* Move the highlighted bottom border on the left back*/
}

Effect picture:

Next, we need to hide the bottom border that is idle on the left when it is not highlighted. We just need to set overflow: hidden; on the <form> element.

form {
  width: 50%;
  height: 50vh;
  margin: auto;
  position: relative;
  font-family: Sans-serif;
  overflow: hidden; /* New */
}

When it is not selected or not input, the highlighted bottom border on the left will be invisible.

Effect picture:

In this way, we have completed the text input box of the Google Material Design specification.

Summarize

The above is the CSS implementation of Google Material Design text input box style introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!