Input by opMorn

1.input-container {
2  position: relative;
3  margin: 50px auto;
4  width: 200px;
5}
6
7.input-container input[type="text"] {
8  font-size: 20px;
9  width: 100%;
10  border: none;
11  border-bottom: 2px solid #ccc;
12  padding: 5px 0;
13  background-color: transparent;
14  outline: none;
15}
16
17.input-container .label {
18  position: absolute;
19  top: 0;
20  left: 0;
21  color: #ccc;
22  transition: all 0.3s ease;
23  pointer-events: none;
24}
25
26.input-container input[type="text"]:focus ~ .label,
27.input-container input[type="text"]:valid ~ .label {
28  top: -20px;
29  font-size: 16px;
30  color: #333;
31}
32
33.input-container .underline {
34  position: absolute;
35  bottom: 0;
36  left: 0;
37  height: 2px;
38  width: 100%;
39  background-color: #333;
40  transform: scaleX(0);
41  transition: all 0.3s ease;
42}
43
44.input-container input[type="text"]:focus ~ .underline,
45.input-container input[type="text"]:valid ~ .underline {
46  transform: scaleX(1);
47}
48