Rebuild Gmail text input

Here you can find the live version

Now let’s see how you can build one.

We’ll start like always with

HTML

<div class="form-control">
  <input required type="text" name="input" />
  <label>Email address or phone number </label>
  <div class="border-around"></div>
</div>

For our text input we first need to create a container:

<div class="form-control">
...
</div>

In this container we are going to have as first child a text input, a label and then a div which will be used to add that nice bluish border around our input.

<input required type="text" name="input" />
<label>Email address or phone number </label>
<div class="border-around"></div>

We just finished the HTML part and now we need to add some CSS.

CSS

Styling our container:

Here we’re just going to add a width, height and also a position: relative; because we will further use position: absolute; to align the border and label as desired.

.form-control {
  position: relative;
  width: 280px;
  height: 50px;
}

Styling text input:

The text input needs to have the same size as the container so we’ll use a width and height of 100%. We need to set border to 0 because we’re going to use the div with class border-around as the border for our input.

.form-control input {
  width: 100%;
  border: 0;
  outline: none;
  height: 100%;
  padding: 0 15px;
  transition: 0.4s;
}

Styling the label:

Now we have to use position: absolute; with top set to 0 and flex to center align the label inside our input.

.form-control label {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  padding-left: 15px;
  width: 100%;
  height: 100%;
  transition: 0.2s;
  font-size: 1rem;
  color: gray;
  pointer-events: none;
}

Styling the border

We will have a border of 1px solid rgba(0, 0, 0, 0.2) and border-radius of 3px.

.form-control div.border-around {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  padding-right: 25px;
  top: 0;
  pointer-events: none;
  border-radius: 3px;
  transition: 0.2s;
}

Lets now take advantage of the pseudo classes and change some css properties when we interact with our input:

Use pseudo classes to style elements on :focus, :valid and :not(:focus).

input:valid

Because we’ve set required on text input, input:valid will match only when our text input is valid.

input:focus

When we focus on our input we need to move up the label and also add a color to the border, this two selectors will to the trick:

• .form-control input:focus ~ div.border-around
• .form-control input:focus + label

input:not(:focus)

After we’ve added some text to our input and clicked somewhere else we need to change the text color,input:not(:focus) will do the trick.

.form-control input:valid + label {
  top: -0.45rem;
  left: 10px;
  font-size: 0.9rem;
  z-index: 100;
  width: auto;
  height: 0.9rem;
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.3);
}

input:not(:focus) {
  color: rgba(0, 0, 0, 0.5);
}

.form-control input:focus + label {
  top: -0.45rem;
  left: 10px;
  font-size: 0.9rem;
  z-index: 100;
  width: auto;
  height: 0.9rem;
  padding: 0 10px;
  color: #3484f0;
}

.form-control input:focus ~ div.border-around {
  border: 2px solid #3484f0;
}

That’s all you need! Hope you enjoyed and see you next time!

Here you can find the live version