Input by Alien14k

1.form__group {
2  position: relative;
3}
4
5.form__field {
6  border: 1px solid silver !important;
7  border-radius: 5px;
8  box-sizing: border-box;
9  color: #313a46;
10  height: 40px;
11  padding: 0rem 15px;
12}
13
14.form__field::placeholder {
15  color: transparent;
16}
17
18.form__field:placeholder-shown ~ .form__label {
19  top: 10px;
20  border-right: none;
21  border-left: none;
22}
23
24.form__label {
25  background-color: white;
26  border-left: 1px solid silver;
27  border-right: 1px solid silver;
28  color: #9b9b9b;
29  display: block;
30  font-size: .9em;
31  margin-left: 10px;
32  padding: 0 10px;
33  pointer-events: none;
34  position: absolute;
35  top: -10px;
36  transition: 0.2s;
37}
38
39.form__field:focus {
40  border: 1px solid #B9192C !important;
41  outline: none;
42}
43
44.form__field:focus ~ .form__label {
45  background-color: white;
46  border-right: 1px solid #B9192C;
47  border-left: 1px solid #B9192C;
48  color: #B9192C;
49  font-size: .9em;
50  margin-left: 10px;
51  padding: 0 10px;
52  position: absolute;
53  top: -10px;
54  transition: 0.2s;
55}