Can't customize focus colors for select and other inputs

[justingolden21]

I have buttons that work fine using the four focus colors listed here: https://daisyui.com/docs/colors/

But my selects, inputs, and other elements when focused have a super super light outline that is barely visible. I can't see any way, in daisyui, tailwind, or vanilla css to solve this. I can only override it and it still appears.

[justingolden21]

Additionally, when applying :focus in the inspector, this style doesn't appear, even though all other focus styles appear. Very bizarre

[justingolden21]

	button:focus,
	select:focus,
	input:focus,
	label:focus {
		@apply outline-base-700;
	}

is my temp solution but I have to copy paste this across everywhere it's relevant because it is not possible from the config. Only buttons use the focus variables defined in the theme file.

[biaocy]

Some new spec comes out, and the browser changed the pseudo-class name to :focus-visible

So we need to do this instead:

:focus, /* Some component like file input need this. */
:focus-visible {
   @apply <your style name>
}

note: the example above will override all component focus style

[KrisPett]

In order to change border/outline color when focus I used these classes

focus-visible:border-0
focus-visible:ring-0
focus-visible:ring-offset-2
focus-visible:ring-offset-orange-300