1.group {
2 position: relative;
3}
4
5.input {
6 font-size: 16px;
7 padding: 10px 10px 10px 5px;
8 display: block;
9 width: 200px;
10 border: none;
11 border-bottom: 1px solid #515151;
12 background: transparent;
13}
14
15.input:focus {
16 outline: none;
17}
18
19label {
20 color: #999;
21 font-size: 18px;
22 font-weight: normal;
23 position: absolute;
24 pointer-events: none;
25 left: 5px;
26 top: 10px;
27 transition: 0.2s ease all;
28 -moz-transition: 0.2s ease all;
29 -webkit-transition: 0.2s ease all;
30}
31
32.input:focus ~ label, .input:valid ~ label {
33 top: -20px;
34 font-size: 14px;
35 color: #5264AE;
36}
37
38.bar {
39 position: relative;
40 display: block;
41 width: 200px;
42}
43
44.bar:before, .bar:after {
45 content: '';
46 height: 2px;
47 width: 0;
48 bottom: 1px;
49 position: absolute;
50 background: #5264AE;
51 transition: 0.2s ease all;
52 -moz-transition: 0.2s ease all;
53 -webkit-transition: 0.2s ease all;
54}
55
56.bar:before {
57 left: 50%;
58}
59
60.bar:after {
61 right: 50%;
62}
63
64.input:focus ~ .bar:before, .input:focus ~ .bar:after {
65 width: 50%;
66}
67
68.highlight {
69 position: absolute;
70 height: 60%;
71 width: 100px;
72 top: 25%;
73 left: 0;
74 pointer-events: none;
75 opacity: 0.5;
76}
77
78.input:focus ~ .highlight {
79 animation: inputHighlighter 0.3s ease;
80}
81
82@keyframes inputHighlighter {
83 from {
84  background: #5264AE;
85 }
86
87 to {
88  width: 0;
89  background: transparent;
90 }
91}