Input by alexruix

1.input-group {
2 position: relative;
3}
4
5.input {
6 border: solid 1.5px #9e9e9e;
7 border-radius: 1rem;
8 background: none;
9 padding: 1rem;
10 font-size: 1rem;
11 color: #f5f5f5;
12 transition: border 150ms cubic-bezier(0.4,0,0.2,1);
13}
14
15.user-label {
16 position: absolute;
17 left: 15px;
18 color: #e8e8e8;
19 pointer-events: none;
20 transform: translateY(1rem);
21 transition: 150ms cubic-bezier(0.4,0,0.2,1);
22}
23
24.input:focus, input:valid {
25 outline: none;
26 border: 1.5px solid #1a73e8;
27}
28
29.input:focus ~ label, input:valid ~ label {
30 transform: translateY(-50%) scale(0.8);
31 background-color: #212121;
32 padding: 0 .2em;
33 color: #2196f3;
34}