Input by Li-Deheng

1.search {
2  --input-line: #cccccc;
3  --input-text-color: #808080;
4  --input-text-hover-color: transparent;
5  --input-border-color: #808080;
6  --input-border-hover-color: #999999;
7  --input-bg-color: #333333;
8  --search-max-width: 250px;
9  --search-min-width: 150px;
10  --border-radius: 5px;
11  --transition-cubic-bezier: 150ms cubic-bezier(0.4,0,0.2,1);
12}
13
14.search-box {
15  max-width: var(--search-max-width);
16  min-width: var(--search-min-width);
17  height: 35px;
18  border: 1px solid var(--input-border-color);
19  border-radius: var(--border-radius);
20  padding: 5px 15px;
21  background: var(--input-bg-color);
22  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
23  transition: var(--transition-cubic-bezier);
24}
25
26.search-box:hover {
27  border-color: var(--input-border-hover-color);
28}
29
30/*Section input*/
31.search-field {
32  position: relative;
33  width: 100%;
34  height: 100%;
35  left: -5px;
36  border: 0;
37}
38
39.input {
40  width: calc(100% - 29px);
41  height: 100%;
42  border: 0;
43  border-color: transparent;
44  font-size: 1rem;
45  padding-right: 0px;
46  color: var(--input-line);
47  background: var(--input-bg-color);
48  border-right: 2px solid var(--input-border-color);
49  outline: none;
50}
51
52.input::-webkit-input-placeholder {
53  color: var(--input-text-color);
54}
55
56.input::-moz-input-placeholder {
57  color: var(--input-text-color);
58}
59
60.input::-ms-input-placeholder {
61  color: var(--input-text-color);
62}
63
64.input:focus::-webkit-input-placeholder {
65  color: var(--input-text-hover-color);
66}
67
68.input:focus::-moz-input-placeholder {
69  color: var(--input-text-hover-color);
70}
71
72.input:focus::-ms-input-placeholder {
73  color: var(--input-text-hover-color);
74}
75
76/*Search button*/
77.search-box-icon {
78  width: 52px;
79  height: 35px;
80  position: absolute;
81  top: -6px;
82  right: -21px;
83  background: transparent;
84  border-bottom-right-radius: var(--border-radius);
85  border-top-right-radius: var(--border-radius);
86  transition: var(--transition-cubic-bezier);
87}
88
89.search-box-icon:hover {
90  background: var(--input-border-color);
91}
92
93.btn-icon-content {
94  width: 52px;
95  height: 35px;
96  top: -6px;
97  right: -21px;
98  background: transparent;
99  border: none;
100  cursor: pointer;
101  border-bottom-right-radius: var(--border-radius);
102  border-top-right-radius: var(--border-radius);
103  transition: var(--transition-cubic-bezier);
104  opacity: .4;
105}
106
107.btn-icon-content:hover {
108  opacity: .8;
109}
110
111.search-icon {
112  width: 21px;
113  height: 21px;
114  position: absolute;
115  top: 7px;
116  right: 15px;
117}