Input by ZAKARIAE48CHELLE

1.input-wrapper {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  gap: 15px;
6  position: relative;
7}
8
9.input {
10  border-style: none;
11  height: 50px;
12  width: 50px;
13  padding: 10px;
14  outline: none;
15  border-radius: 50%;
16  transition: 0.5s ease-in-out;
17  background-color: #1557c0;
18  box-shadow: 0px 0px 3px #1557c0;
19  padding-right: 40px;
20  color: #fff;
21}
22
23.input::placeholder,
24.input {
25  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
26    "Lucida Sans", Arial, sans-serif;
27  font-size: 17px;
28}
29
30.input::placeholder {
31  color: #8f8f8f;
32}
33
34.icon {
35  display: flex;
36  align-items: center;
37  justify-content: center;
38  position: absolute;
39  right: 0px;
40  cursor: pointer;
41  width: 50px;
42  height: 50px;
43  outline: none;
44  border-style: none;
45  border-radius: 50%;
46  pointer-events: painted;
47  background-color: transparent;
48  transition: 0.2s linear;
49}
50
51.icon:focus ~ .input,
52.input:focus {
53  box-shadow: none;
54  width: 250px;
55  border-radius: 0px;
56  background-color: transparent;
57  border-bottom: 3px solid #1557c0;
58  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
59}
60