react aria input focus border color

[ansxnlee]

I want to change the styling on input's focused border with something like:

<Input className='data-[focused]:border-4 data-[focused]:border-blue-400' />

but I don't even think I'm doing it properly. It seems like I'm just adding a second border on top of the one that already exists? How can I apply css to Input's states correctly?

[snowystinger]

I do not know the rest of your projects setup unfortunately, so without a codesandbox or stackblitz to demo the issue you're facing, I can only hazard some guesses.
You could also inspect the element and show the appropriate styles in a screenshot to help narrow it down.

You could be dealing with the native focus. It might be that you aren't using focus-visible instead of focused. There could be something else going on.

It might be useful to look at our examples https://react-spectrum.adobe.com/react-aria/examples/user-combobox.html or our docs on styling https://react-spectrum.adobe.com/react-aria/styling.html#tailwind-css

[devongovett]

Probably just the default focus outline from browsers. outline-none suppresses it.

[ansxnlee]

thanks, that was it. was banging my head for a while on this one..