Pure CSS to achieve a cool input box effect

See the effect first

username

`:valid` and `:invalid` pseudo-classes

These two pseudo-classes can be used on input and select elements to select input boxes that have passed or failed validation. Let’s learn about them through the following simple example: This input box will check whether the input is an email address, otherwise the background color will be red warning.

The code is also very simple:

1
2
3
4
5


<input class="demo-input-2" type="email"/>
<style>
//The invalid pseudo-class can select inputs that cannot pass the validation
.demo-input-2:invalid{background:red}
</style>

`required` attribute

This attribute can be used on input and select elements to indicate that this input box is required. If left blank, it will fail the validation and can be selected by the :invalid pseudo-class, otherwise it will be selected by :valid, for example: This input box cannot be left blank, otherwise the background color will be red warning.

1
2
3
4


<input class="demo-input-3" type="email"/>
<style>
.demo-input-2:invalid{background:red}
</style>

`pattern` attribute

This attribute can be used on input and select elements. Its attribute value needs to be filled in with a regular expression. If the content of the input box does not match the regular expression, it can be selected by the :invalid pseudo-class, otherwise it will be selected by :valid. For example: This input box can only enter six digits, otherwise the background color will be red warning.

1

<input class="demo-input-4" type="email"/> <style> .demo-input-4:invalid{background:red} </style>

Complete code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


<div class="demo-input">
    <input required/>
    <label>username</label>
</div>
<style>
    .demo-input{
        position: relative; height: 40px; width: 300px; margin: 8px;
    }
    .demo-input *{
        transition-duration: 100ms
    }
    .demo-input input{
        width: 100%; height: 100%;
        box-sizing: border-box;
        border: 2px solid gray;
        border-radius: 6px;
        outline: none;
        padding-left: 10px;
        font-size: 20px;
        color: #006080; }
    .demo-input input:valid, .demo-input input:focus {
        border: 2px solid #006080
    }
    .demo-input label{
        position: absolute;
        top:0;
        left: 10px;
        font-size: 20px;
        color: gray;
        line-height: 36px;
        pointer-events: none;
    }
    .demo-input input:valid + label, .demo-input input:focus + label {
        color: #006080;
        top:-12px;
        font-size: 18px;
        padding: 0 4px;
        background-color: white;
        line-height: 18px;
    }
</style>

Form data validation
:valid pseudo-class
:invalid pseudo-class
required attribute
pattern attribute

See the effect first

:valid and :invalid pseudo-classes

required attribute

pattern attribute

Complete code

Related knowledge

`:valid` and `:invalid` pseudo-classes

`required` attribute

`pattern` attribute