@@ -27,10 +27,29 @@ const Wrapper = styled.div<{
27
27
color: ${ theme . click . field . color . text . default } ;
28
28
border: 1px solid ${ theme . click . field . color . stroke . default } ;
29
29
background: ${ theme . click . field . color . background . default } ;
30
+
31
+ *:autofill,
32
+ *:-webkit-autofill {
33
+ -webkit-box-shadow: 0 0 0px 50vh ${
34
+ theme . click . field . color . background . default
35
+ } inset;
36
+ -webkit-text-fill-color: ${ theme . click . field . color . text . default } ;
37
+ caret-color: ${ theme . click . field . color . text . default } ;
38
+ }
39
+
30
40
&:hover {
31
41
border: 1px solid ${ theme . click . field . color . stroke . hover } ;
32
42
background: ${ theme . click . field . color . background . hover } ;
33
43
color: ${ theme . click . field . color . text . hover } ;
44
+
45
+ *:autofill,
46
+ *:-webkit-autofill {
47
+ -webkit-box-shadow: 0 0 0px 50vh ${
48
+ theme . click . field . color . background . hover
49
+ } inset;
50
+ -webkit-text-fill-color: ${ theme . click . field . color . text . hover } ;
51
+ caret-color: ${ theme . click . field . color . text . hover } ;
52
+ }
34
53
}
35
54
${
36
55
$resize === "none"
@@ -48,9 +67,23 @@ const Wrapper = styled.div<{
48
67
border: 1px solid ${ theme . click . field . color . stroke . error } ;
49
68
background: ${ theme . click . field . color . background . active } ;
50
69
color: ${ theme . click . field . color . text . error } ;
70
+
71
+ *:autofill,
72
+ *:-webkit-autofill {
73
+ -webkit-box-shadow: 0 0 0px 50vh ${ theme . click . field . color . background . error } inset;
74
+ -webkit-text-fill-color: ${ theme . click . field . color . text . error } ;
75
+ caret-color: ${ theme . click . field . color . text . error } ;
76
+ }
77
+
51
78
&:hover {
52
- border: 1px solid ${ theme . click . field . color . stroke . error } ;
53
- color: ${ theme . click . field . color . text . error } ;
79
+ border: 1px solid ${ theme . click . field . color . stroke . error } ;
80
+ color: ${ theme . click . field . color . text . error } ;
81
+ *:autofill,
82
+ *:-webkit-autofill {
83
+ -webkit-box-shadow: 0 0 0px 50vh ${ theme . click . field . color . background . error } inset;
84
+ -webkit-text-fill-color: ${ theme . click . field . color . text . error } ;
85
+ caret-color: ${ theme . click . field . color . text . error } ;
86
+ }
54
87
}
55
88
`
56
89
: `
@@ -60,6 +93,13 @@ const Wrapper = styled.div<{
60
93
border: 1px solid ${ theme . click . field . color . stroke . active } ;
61
94
background: ${ theme . click . field . color . background . active } ;
62
95
color: ${ theme . click . field . color . text . active } ;
96
+
97
+ *:autofill,
98
+ *:-webkit-autofill {
99
+ -webkit-box-shadow: 0 0 0px 50vh ${ theme . click . field . color . background . active } inset;
100
+ -webkit-text-fill-color: ${ theme . click . field . color . text . active } ;
101
+ caret-color: ${ theme . click . field . color . text . active } ;
102
+ }
63
103
}
64
104
`
65
105
} ;
@@ -68,6 +108,15 @@ const Wrapper = styled.div<{
68
108
border: 1px solid ${ theme . click . field . color . stroke . disabled } ;
69
109
background: ${ theme . click . field . color . background . disabled } ;
70
110
color: ${ theme . click . field . color . text . disabled } ;
111
+
112
+ *:autofill,
113
+ *:-webkit-autofill {
114
+ -webkit-box-shadow: 0 0 0px 50vh ${
115
+ theme . click . field . color . background . disabled
116
+ } inset;
117
+ -webkit-text-fill-color: ${ theme . click . field . color . text . disabled } ;
118
+ caret-color: ${ theme . click . field . color . text . disabled } ;
119
+ }
71
120
}
72
121
` }
73
122
` ;
@@ -138,17 +187,21 @@ export const InputElement = styled.input`
138
187
` }
139
188
` ;
140
189
141
- export const NumberInputElement = styled ( InputElement ) < { $hideControls ?: boolean } > `
142
- ${ ( { $hideControls} ) => `
143
- ${ $hideControls ? `
190
+ export const NumberInputElement = styled ( InputElement ) < { $hideControls ?: boolean } > `
191
+ ${ ( { $hideControls } ) => `
192
+ ${
193
+ $hideControls
194
+ ? `
144
195
&::-webkit-outer-spin-button,
145
196
&::-webkit-inner-spin-button {
146
197
-webkit-appearance: none;
147
198
margin: 0;
148
199
}
149
200
150
201
-moz-appearance: textfield;
151
- ` : "" }
202
+ `
203
+ : ""
204
+ }
152
205
` }
153
206
` ;
154
207
0 commit comments