Skip to content

0.7.3 changing <Select> focus ring #1356

Answered by SutuSebastian
DanSizov asked this question in Q&A
Discussion options

You must be logged in to vote

Regarding overriding the border, here's the theme config for select component overriding the border and focus ring color to blue:

import { getTheme, Select } from "flowbite-react";

<Select
  theme={{
    field: {
      select: {
        colors: {
          gray: twMerge(
            getTheme().select.field.select.colors.gray,
            "focus:border-blue-500 focus:ring-blue-500 dark:placeholder:text-blue-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
          ),
        },
      },
    },
  }}
>
  <option>United States</option>
  <option>Canada</option>
  <option>France</option>
  <option>Germany</option>
</Select>

Result

Note: the default color is gray, but for some reaso…

Replies: 2 comments 1 reply

Comment options

You must be logged in to vote
0 replies
Comment options

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

Answer selected by DanSizov
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