1.wrapper {
2  position: relative;
3}
4
5.input {
6  width: 190px;
7  height: 35px;
8  border-radius: 5px;
9  border: 2px #323232 solid;
10  padding: 5px 15px;
11  background-color: #e8e8e8;
12  font-size: 15;
13  font-weight: 500;
14}
15
16.placeholder {
17  width: 65%;
18  position: absolute;
19  top: -18px;
20  left: 50%;
21  transform: translateX(-50%);
22  z-index: 2;
23  text-align: center;
24  color: blueviolet;
25  background-color: #e8e8e8;
26  font-weight: 600;
27  font-size: 15px;
28  letter-spacing: 1.5px;
29  transition: all 0.3s;
30  opacity: 0;
31}
32
33.input::placeholder {
34  font-size: 15px;
35  font-weight: 500;
36  letter-spacing: 1px;
37}
38
39.input:focus + .placeholder {
40  opacity: 1;
41}
42
43.input:focus {
44  outline: 2px solid blueviolet;
45  border: none;
46  color: blueviolet;
47}
48
49.input:focus::placeholder {
50  opacity: 0;
51}
52