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: .5s ease-in-out;
17 background-color: #7e4fd4;
18 box-shadow: 0px 0px 3px #f3f3f3;
19 padding-right: 40px;
20 color: #fff;
21}
22
23.input::placeholder,
24.input {
25 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
26 font-size: 17px;
27}
28
29.input::placeholder {
30 color: #8f8f8f;
31}
32
33.icon {
34 display: flex;
35 align-items: center;
36 justify-content: center;
37 position: absolute;
38 right: 0px;
39 cursor: pointer;
40 width: 50px;
41 height: 50px;
42 outline: none;
43 border-style: none;
44 border-radius: 50%;
45 pointer-events: painted;
46 background-color: transparent;
47 transition: .2s linear;
48}
49
50.icon:focus ~ .input,
51.input:focus {
52 box-shadow: none;
53 width: 250px;
54 border-radius: 0px;
55 background-color: transparent;
56 border-bottom: 3px solid #7e4fd4;
57 transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
58}
59
60
61
boryanakrasteva