Input by Yaya12085

1.input-container {
2  position: relative;
3  display: flex;
4  align-items: center;
5}
6
7.input {
8  width: 40px;
9  height: 40px;
10  border-radius: 10px;
11  border: none;
12  outline: none;
13  padding: 18px 16px;
14  background-color: transparent;
15  cursor: pointer;
16  transition: all .5s ease-in-out;
17}
18
19.input::placeholder {
20  color: transparent;
21}
22
23.input:focus::placeholder {
24  color: rgb(131, 128, 128);
25}
26
27.input:focus,.input:not(:placeholder-shown) {
28  background-color: #fff;
29  border: 1px solid rgb(98, 0, 255);
30  width: 290px;
31  cursor: none;
32  padding: 18px 16px 18px 40px;
33}
34
35.icon {
36  position: absolute;
37  left: 0;
38  top: 0;
39  height: 40px;
40  width: 40px;
41  background-color: #fff;
42  border-radius: 10px;
43  z-index: -1;
44  fill: rgb(98, 0, 255);
45  border: 1px solid rgb(98, 0, 255);
46}
47
48.input:hover + .icon {
49  transform: rotate(360deg);
50  transition: .2s ease-in-out;
51}
52
53.input:focus + .icon,.input:not(:placeholder-shown) + .icon {
54  z-index: 0;
55  background-color: transparent;
56  border: none;
57}
58