Here you can find the live version
Now let’s see how you can build one.
We’ll start like always with
<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.
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;
}
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;
}
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;
}
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:
: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!