Input by satyamchaudharydev

1/* this is a recreation of twitter search in css */
2.form {
3  --input-text-color: #fff;
4  --input-bg-color: #283542;
5  --focus-input-bg-color: transparent;
6  --text-color: #949faa;
7  --active-color: #1b9bee;
8  --width-of-input: 200px;
9  --inline-padding-of-input: 1.2em;
10  --gap: 0.9rem;
11}
12/* form style */
13.form {
14  font-size: 0.9rem;
15  display: flex;
16  gap: 0.5rem;
17  align-items: center;
18  width: var(--width-of-input);
19  position: relative;
20  isolation: isolate;
21}
22/* a fancy bg for showing background and border when focus. */
23.fancy-bg {
24  position: absolute;
25  width: 100%;
26  inset: 0;
27  background: var(--input-bg-color);
28  border-radius: 30px;
29  height: 100%;
30  z-index: -1;
31  pointer-events: none;
32  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
33}
34/* label styling */
35label {
36  width: 100%;
37  padding: 0.8em;
38  height: 40px;
39  padding-inline: var(--inline-padding-of-input);
40  display: flex;
41  align-items: center;
42}
43
44.search,.close-btn {
45  position: absolute;
46}
47/* styling search-icon */
48.search {
49  fill: var(--text-color);
50  left: var(--inline-padding-of-input);
51}
52/* svg -- size */
53svg {
54  width: 17px;
55  display: block;
56}
57/* styling of close button */
58.close-btn {
59  border: none;
60  right: var(--inline-padding-of-input);
61  box-sizing: border-box;
62  display: flex;
63  align-items: center;
64  justify-content: center;
65  color: #fff;
66  padding: 0.1em;
67  width: 20px;
68  height: 20px;
69  border-radius: 50%;
70  background: var(--active-color);
71  opacity: 0;
72  visibility: hidden;
73}
74/* styling of input */
75.input {
76  color: var(--input-text-color);
77  width: 100%;
78  margin-inline: min(2em,calc(var(--inline-padding-of-input) + var(--gap)));
79  background: none;
80  border: none;
81}
82
83.input:focus {
84  outline: none;
85}
86
87.input::placeholder {
88  color: var(--text-color)
89}
90/* input background change in focus */
91.input:focus ~ .fancy-bg {
92  border: 1px solid var(--active-color);
93  background: var(--focus-input-bg-color);
94}
95/* search icon color change in focus */
96.input:focus ~ .search {
97  fill: var(--active-color);
98}
99/* showing close button when typing */
100.input:valid ~ .close-btn {
101  opacity: 1;
102  visibility: visible;
103}
104/* this is for the default background in input,when selecting autofill options -- you can remove this code if you do not want to override the browser style.  */
105input:-webkit-autofill,
106input:-webkit-autofill:hover,
107input:-webkit-autofill:focus,
108input:-webkit-autofill:active {
109  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
110  -webkit-transition-delay: 9999s;
111}