1/* From uiverse.io by @satyamchaudharydev */
2/* this button is inspired by -- whatsapp input */
3/* == type to see fully interactive and click the close buttom to remove the text  == */
4
5.form {
6  --input-bg: #FFf;
7 /*  background of input */
8  --padding: 1.5em;
9  --rotate: 80deg;
10 /*  rotation degree of input*/
11  --gap: 2em;
12  /*  gap of items in input */
13  --icon-change-color: #15A986;
14 /*  when rotating changed icon color */
15  --height: 40px;
16 /*  height */
17  width: 200px;
18  padding-inline-end: 1em;
19 /*  change this for padding in the end of input */
20  background: var(--input-bg);
21  position: relative;
22  border-radius: 4px;
23}
24
25.form label {
26  display: flex;
27  align-items: center;
28  width: 100%;
29  height: var(--height);
30}
31
32.form input {
33  width: 100%;
34  padding-inline-start: calc(var(--padding) + var(--gap));
35  outline: none;
36  background: none;
37  border: 0;
38}
39/* style for both icons -- search,close */
40.form svg {
41  /* display: block; */
42  color: #111;
43  transition: 0.3s cubic-bezier(.4,0,.2,1);
44  position: absolute;
45  height: 15px;
46}
47/* search icon */
48.icon {
49  position: absolute;
50  left: var(--padding);
51  transition: 0.3s cubic-bezier(.4,0,.2,1);
52  display: flex;
53  justify-content: center;
54  align-items: center;
55}
56/* arrow-icon*/
57.swap-off {
58  transform: rotate(-80deg);
59  opacity: 0;
60  visibility: hidden;
61}
62/* close button */
63.close-btn {
64  /* removing default bg of button */
65  background: none;
66  border: none;
67  right: calc(var(--padding) - var(--gap));
68  box-sizing: border-box;
69  display: flex;
70  align-items: center;
71  justify-content: center;
72  color: #111;
73  padding: 0.1em;
74  width: 20px;
75  height: 20px;
76  border-radius: 50%;
77  transition: 0.3s;
78  opacity: 0;
79  transform: scale(0);
80  visibility: hidden;
81}
82
83.form input:focus ~ .icon {
84  transform: rotate(var(--rotate)) scale(1.3);
85}
86
87.form input:focus ~ .icon .swap-off {
88  opacity: 1;
89  transform: rotate(-80deg);
90  visibility: visible;
91  color: var(--icon-change-color);
92}
93
94.form input:focus ~ .icon .swap-on {
95  opacity: 0;
96  visibility: visible;
97}
98
99.form input:valid ~ .icon {
100  transform: scale(1.3) rotate(var(--rotate))
101}
102
103.form input:valid ~ .icon .swap-off {
104  opacity: 1;
105  visibility: visible;
106  color: var(--icon-change-color);
107}
108
109.form input:valid ~ .icon .swap-on {
110  opacity: 0;
111  visibility: visible;
112}
113
114.form input:valid ~ .close-btn {
115  opacity: 1;
116  visibility: visible;
117  transform: scale(1);
118  transition: 0s;
119}
120