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