1.group {
2 display: flex;
3 line-height: 28px;
4 align-items: center;
5 position: relative;
6 max-width: 190px;
7}
8
9.input {
10 width: 100%;
11 height: 40px;
12 line-height: 28px;
13 padding: 0 1rem;
14 padding-left: 2.5rem;
15 border: 2px solid transparent;
16 border-radius: 8px;
17 outline: none;
18 background-color: #f3f3f4;
19 color: #0d0c22;
20 transition: .3s ease;
21}
22
23.input::placeholder {
24 color: #9e9ea7;
25}
26
27.input:focus, input:hover {
28 outline: none;
29 border-color: rgba(234,76,137,0.4);
30 background-color: #fff;
31 box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
32}
33
34.icon {
35 position: absolute;
36 left: 1rem;
37 fill: #9e9ea7;
38 width: 1rem;
39 height: 1rem;
40}
41
42
43
44
45
46