Input by bedirhan-arslan

1.formField {
2  margin: 10px;
3  position: relative;
4}
5
6.formField input {
7  padding: 10px 15px;
8  outline: none;
9  border: none;
10  border-radius: 5px;
11  background-color: #f1f1f1;
12  color: #333;
13  font-size: 16px;
14  font-weight: 550;
15  transition: 0.3s ease-in-out;
16  box-shadow: 0 0 0 5px transparent;
17}
18
19.formField input:hover,
20.formField input:focus {
21  box-shadow: 0 0 0 2px #333;
22}
23
24.formField span {
25  position: absolute;
26  left: 0;
27  top: 0;
28  padding: 8px 15px;
29  color: #333;
30  font-size: 16px;
31  font-weight: 600;
32  text-shadow: -1px -1px 0 #f1f1f1, 1px -1px 0 #f1f1f1, -1px 1px 0 #f1f1f1,
33    1px 1px 0 #f1f1f1;
34  transition: 0.3s ease-in-out;
35  pointer-events: none;
36}
37
38.formField input:focus + span,
39.formField input:valid + span {
40  transform: translateY(-32px) translateX(-5px) scale(0.95);
41  transition: 0.3s ease-in-out;
42}
43