1.input-form {
2  position: relative;
3  font-family: Arial, Helvetica, sans-serif;
4}
5
6.input {
7  border: solid 1.9px #9e9e9e;
8  border-radius: 1.3rem;
9  background: none;
10  padding: 1rem;
11  font-size: 1rem;
12  color: #000000;
13  transition: border 150ms cubic-bezier(0.4,0,0.2,1);
14}
15
16.textUser {
17  position: absolute;
18  left: 15px;
19  color: #666666;
20  pointer-events: none;
21  transform: translateY(1rem);
22  transition: 150ms cubic-bezier(0.4,0,0.2,1);
23}
24
25.input:focus, input:valid {
26  outline: none;
27  box-shadow: 1px 2px 5px rgba(133, 133, 133, 0.523);
28  background-image: linear-gradient(to top, rgba(182, 182, 182, 0.199), rgba(252, 252, 252, 0));
29  transition: background 4s ease-in-out;
30}
31
32.input:focus ~ label, input:valid ~ label {
33  transform: translateY(-95%) scale(0.9);
34  padding: 0 .2em;
35  color: #000000be;
36  left: 80px;
37}
38
39.input:hover {
40  border: solid 1.9px #000002;
41  transform: scale(1.03);
42  box-shadow: 1px 1px 5px rgba(133, 133, 133, 0.523);
43  transition: border-color 1s ease-in-out;
44}