Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 7a443db

Browse files
authoredMay 21, 2024
Fix autofill styling (#414)
* Fix autofill styling * Remove typo
1 parent ccf7593 commit 7a443db

File tree

1 file changed

+59
-6
lines changed

1 file changed

+59
-6
lines changed
 

‎src/components/Input/InputWrapper.tsx

Lines changed: 59 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,29 @@ const Wrapper = styled.div<{
2727
color: ${theme.click.field.color.text.default};
2828
border: 1px solid ${theme.click.field.color.stroke.default};
2929
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+
3040
&:hover {
3141
border: 1px solid ${theme.click.field.color.stroke.hover};
3242
background: ${theme.click.field.color.background.hover};
3343
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+
}
3453
}
3554
${
3655
$resize === "none"
@@ -48,9 +67,23 @@ const Wrapper = styled.div<{
4867
border: 1px solid ${theme.click.field.color.stroke.error};
4968
background: ${theme.click.field.color.background.active};
5069
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+
5178
&: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+
}
5487
}
5588
`
5689
: `
@@ -60,6 +93,13 @@ const Wrapper = styled.div<{
6093
border: 1px solid ${theme.click.field.color.stroke.active};
6194
background: ${theme.click.field.color.background.active};
6295
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+
}
63103
}
64104
`
65105
};
@@ -68,6 +108,15 @@ const Wrapper = styled.div<{
68108
border: 1px solid ${theme.click.field.color.stroke.disabled};
69109
background: ${theme.click.field.color.background.disabled};
70110
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+
}
71120
}
72121
`}
73122
`;
@@ -138,17 +187,21 @@ export const InputElement = styled.input`
138187
`}
139188
`;
140189

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+
? `
144195
&::-webkit-outer-spin-button,
145196
&::-webkit-inner-spin-button {
146197
-webkit-appearance: none;
147198
margin: 0;
148199
}
149200
150201
-moz-appearance: textfield;
151-
` : ""}
202+
`
203+
: ""
204+
}
152205
`}
153206
`;
154207

0 commit comments

Comments
 (0)
Please sign in to comment.