Skip to content

How to remove input border #4963

Answered by Rall3n
mhanifmuhsin asked this question in Q&A
Discussion options

You must be logged in to vote

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 an outline or a box-shadow.

You can override it using the Select components Styling API:

<Select
  styles={{
    input: (css) => ({
      ...css,
      input: {
        outline: none
      }
    })
  }}
/>

Other solutions with @tailwindcss/forms as the cause of the issue can be found here

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@mhanifmuhsin
Comment options

Answer selected by mhanifmuhsin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants