Input by Sunhotep

1.form__group {
2  position: relative;
3  padding: 20px 0 0;
4  width: 100%;
5  max-width: 180px;
6}
7
8.form__field {
9  font-family: inherit;
10  width: 100%;
11  border: none;
12  border-bottom: 2px solid #6b6b6b;
13  outline: 0;
14  font-size: 17px;
15  color: #fff;
16  padding: 7px 0;
17  background: transparent;
18  transition: border-color 0.2s;
19}
20
21.form__field::placeholder {
22  color: transparent;
23}
24
25.form__field:placeholder-shown ~ .form__label {
26  font-size: 17px;
27  cursor: text;
28  top: 20px;
29}
30
31.form__label {
32  position: absolute;
33  top: 0;
34  display: block;
35  transition: 0.2s;
36  font-size: 17px;
37  color: #FFE699;
38  pointer-events: none;
39}
40
41.form__field:focus {
42  padding-bottom: 6px;
43  font-weight: 700;
44  border-width: 3px;
45  border-image: linear-gradient(to right, #FFE699, #5D3294);
46  border-image-slice: 1;
47}
48
49.form__field:focus ~ .form__label {
50  position: absolute;
51  top: 0;
52  display: block;
53  transition: 0.2s;
54  font-size: 17px;
55  color: #FFE699;
56  font-weight: 700;
57}
58
59/* reset input */
60.form__field:required, .form__field:invalid {
61  box-shadow: none;
62}