1.input-container {
2  position: relative;
3}
4
5.input {
6  padding: 10px;
7  height: 40px;
8  border: 2px solid #0B2447;
9  border-top: none;
10  border-bottom: none;
11  font-size: 16px;
12  background: transparent;
13  outline: none;
14  box-shadow: 7px 7px 0px 0px #0B2447;
15  transition: all 0.5s;
16}
17
18.input:focus {
19  box-shadow: none;
20  transition: all 0.5s;
21}
22
23.label {
24  position: absolute;
25  top: 10px;
26  left: 10px;
27  color: #0B2447;
28  transition: all 0.5s;
29  transform: scale(0);
30  z-index: -1;
31}
32
33.input-container .topline {
34  position: absolute;
35  content: "";
36  background-color: #0B2447;
37  width: 0%;
38  height: 2px;
39  right: 0;
40  top: 0;
41  transition: all 0.5s;
42}
43
44.input-container input[type="text"]:focus ~ .topline {
45  width: 35%;
46  transition: all 0.5s;
47}
48
49.input-container .underline {
50  position: absolute;
51  content: "";
52  background-color: #0B2447;
53  width: 0%;
54  height: 2px;
55  right: 0;
56  bottom: 0;
57  transition: all 0.5s;
58}
59
60.input-container input[type="text"]:focus ~ .underline {
61  width: 100%;
62  transition: all 0.5s;
63}
64
65.input-container input[type="text"]:focus ~ .label {
66  top: -10px;
67  transform: scale(1);
68  transition: all 0.5s;
69}