How to change the focus ( outline ) color of select component ?

[alamenai]

Hi @shadcn ,

I started using select component and I noticed that the outline color in my UI is black while in the documentation is gray.

I would know how to change that outline color:

Code

From the documentation

<Select>
              <SelectTrigger className='w-[280px]'>
                <SelectValue placeholder='Select a timezone' />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>North America</SelectLabel>
                  <SelectItem value='est'>Eastern Standard Time (EST)</SelectItem>
                  <SelectItem value='cst'>Central Standard Time (CST)</SelectItem>
                  <SelectItem value='mst'>Mountain Standard Time (MST)</SelectItem>
                  <SelectItem value='pst'>Pacific Standard Time (PST)</SelectItem>
                  <SelectItem value='akst'>Alaska Standard Time (AKST)</SelectItem>
                  <SelectItem value='hst'>Hawaii Standard Time (HST)</SelectItem>
                </SelectGroup>
                <SelectGroup>
                  <SelectLabel>Europe & Africa</SelectLabel>
                  <SelectItem value='gmt'>Greenwich Mean Time (GMT)</SelectItem>
                  <SelectItem value='cet'>Central European Time (CET)</SelectItem>
                  <SelectItem value='eet'>Eastern European Time (EET)</SelectItem>
                  <SelectItem value='west'>Western European Summer Time (WEST)</SelectItem>
                  <SelectItem value='cat'>Central Africa Time (CAT)</SelectItem>
                  <SelectItem value='eat'>East Africa Time (EAT)</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>

[birjj]

That outline is called the ring in Tailwind terms. You can change its color using ring-{color} classes (where the color name depends on whether you're using utility classes or CSS variables, see the theming docs), or by globally setting its value (which is what the docs site does).

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[alamenai]

Thank you @birjj , yes it works as expected.