CSS implementation of Google material design text input box style (recommended)

Time:2020-3-29

Hello everyone, today I want to share with you how to use pure CSS to realize the style of Google material design text input box.

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

See here for Demo: click here to see demo [codepen]

Final rendering:

在这里插入图片描述

Only tested on chrome. If you find that other browsers have problems, welcome to provide modification methods, learn and progress together!

Start to implement

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 user names.

Everyone who believes in cleverness has noticed that we put the < label > tag behind the < input > tag because we need to select the < label > through the status of the < input > tag later. However, they are siblings. The selectors in pure CSS only provide the method to select the next sibling, and we will put the < label > tag behind them.

Design sketch:

效果图

Next, let’s customize the CSS effect of the < form > element.


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

This paragraph of CSS is nothing special, just defining the length, height and font.

Next, let’s give the < input > element some styles.


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

This section of CSS is mainly to set the length and width, as well as just set the border below to make it underlined.

Design sketch:

在这里插入图片描述

Next, we’ll set the < label > label, which is to move the word username to the top of the text input box.


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

It is worth noting that we set:

pointer-events: none;

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

Design sketch:

在这里插入图片描述

Next, we will add padding top to the < input > element, which will push the < label > username a little higher.

Then we add Outline: none to the < input > element, so that when we click on the text input box, there will be no more blue borders.

form input {
  height: 2rem;
  width: 10rem;
  Padding top: 1rem; / * NEW*/
  border: none;
  border-bottom: 0.1rem solid black;
  Outline: none; / * NEW*/
}

Design sketch:

在这里插入图片描述

Next, we want the pseudo element after the < input > element:: after the last bottom border style, and we want to move the bottom border to the left.

The reason why we want to shift the bottom border to the left is that in the future, we need to hide it through overflow: hidden; only when the text input box is selected, we can shift the bottom border back as a means to strengthen the visual impact.

form label::after {
  Content: ""; / * this is critical. We need the bottom border of this property to display it*/
  height: 3rem;
  width: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  Border bottom: 0.2rem solid ා 1cb9b6; / * the bottom border needs to be more prominent, here we need to bold to keep up with the color*/
  Transform: translatex (- 100%); / * translate left 100% to make sure to move out of the form element*/
  Transition: all 0.3s ease; / * add animation to achieve smooth movement*/
}

Design sketch:

在这里插入图片描述

Next we want the < label > element username to go down, just above the bottom border.

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

Design sketch:

在这里插入图片描述

Next, we will make a style for the < input > element in the focus 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 we set the required attribute to < input > in HTML, so when there is text in the text input box, it is in the valid state, and vice versa.

<input type=“text” required />
form input:focus + label span,
form input:valid + label span {
  Transform: translatey (- 120%); / * translate username up*/
  Font size: 1.2rem; / * larger font to highlight*/
  Color: ා1cb9b6; / * highlight color*/
}
form input:focus + label::after,
form input:valid + label::after {
  Transform: translatex (0); / * translate the highlighted bottom border on the left back*/
}

Design sketch:

在这里插入图片描述

Then we need to hide the bottom border left when it is not highlighted. We just need to set overflow: hidden; for the < form > element.

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

When it is unchecked or not entered, the highlighted bottom border on the left is invisible.

Design sketch:

在这里插入图片描述

In this way, we have completed the text input box of Google material design specification.

summary

The above is the CSS implementation of Google material design text input box style introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Recommended Today

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]