How to remove input border #4963
Answered
by
Rall3n
mhanifmuhsin
asked this question in
Q&A
-
I have an input form, but it has a blue border, how do I remove it? |
Beta Was this translation helpful? Give feedback.
Answered by
Rall3n
Jan 6, 2022
Replies: 1 comment 1 reply
-
Hello @mhanifmuhsin, this is a problem with whatever base styling framework you are using (e.g. TailwindCSS). Basically the framework applies styles to inputs with the following target: You can override it using the <Select
styles={{
input: (css) => ({
...css,
input: {
outline: none
}
})
}}
/> Other solutions with |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
mhanifmuhsin
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello @mhanifmuhsin,
this is a problem with whatever base styling framework you are using (e.g. TailwindCSS). Basically the framework applies styles to inputs with the following target:
input[type='text']:focused
. This can either be anoutline
or abox-shadow
.You can override it using the
Select
components Styling API:Other solutions with
@tailwindcss/forms
as the cause of the issue can be found here