1.inp {
2  position: relative;
3  margin: auto;
4  width: 100%;
5  max-width: 190px;
6  border-radius: 3px;
7  overflow: hidden;
8}
9
10.inp .label {
11  position: absolute;
12  top: 20px;
13  left: 12px;
14  font-size: 14px;
15  color: rgba(0, 0, 0, 0.5);
16  font-weight: 500;
17  transform-origin: 0 0;
18  transform: translate3d(0, 0, 0);
19  transition: all 0.2s ease;
20  pointer-events: none;
21}
22
23.inp .focus-bg {
24  position: absolute;
25  top: 0;
26  left: 0;
27  width: 100%;
28  height: 100%;
29  background: rgba(0, 0, 0, 0.05);
30  z-index: -1;
31  transform: scaleX(0);
32  transform-origin: left;
33}
34
35.inp input {
36  -webkit-appearance: none;
37  -moz-appearance: none;
38  appearance: none;
39  width: 100%;
40  border: 0;
41  font-family: inherit;
42  padding: 16px 12px 0 12px;
43  height: 56px;
44  font-size: 16px;
45  font-weight: 400;
46  background: rgba(0, 0, 0, 0.02);
47  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
48  color: #000;
49  transition: all 0.15s ease;
50}
51
52.inp input:hover {
53  background: rgba(0, 0, 0, 0.04);
54  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
55}
56
57.inp input:not(:-moz-placeholder-shown) + .label {
58  color: rgba(0, 0, 0, 0.5);
59  transform: translate3d(0, -12px, 0) scale(0.75);
60}
61
62.inp input:not(:-ms-input-placeholder) + .label {
63  color: rgba(0, 0, 0, 0.5);
64  transform: translate3d(0, -12px, 0) scale(0.75);
65}
66
67.inp input:not(:placeholder-shown) + .label {
68  color: rgba(0, 0, 0, 0.5);
69  transform: translate3d(0, -12px, 0) scale(0.75);
70}
71
72.inp input:focus {
73  background: rgba(0, 0, 0, 0.05);
74  outline: none;
75  box-shadow: inset 0 -2px 0 #0077FF;
76}
77
78.inp input:focus + .label {
79  color: #0077FF;
80  transform: translate3d(0, -12px, 0) scale(0.75);
81}
82
83.inp input:focus + .label + .focus-bg {
84  transform: scaleX(1);
85  transition: all 0.1s ease;
86}