Blue Border of inner Text Field
Closed this issue · 5 comments
Have you found a fix for this?
I had the same issue using Tailwind CSS.
Solved adding:
input:focus {
box-shadow: none !important;
}
@sharkfabri Thank you for posting this. I tried to reproduce the issue but was unable to. If this fix works well, just use that. If you want me to investigate this further please provide a codesandbox with the issue. Btw, which browser?
@sharkfabri Thank you for posting this. I tried to reproduce the issue but was unable to. If this fix works well, just use that. If you want me to investigate this further please provide a codesandbox with the issue. Btw, which browser?
Thank you @sickdyd, I just fixed this way, thank you. FYI on all browsers (Chrome, Firefox, Edge...) added a blue border on input focus. I guess it's related to Tailwind because not including it the border disappeares. Anyway that simple CSS fixes the bug.
![Screenshot 2023-07-17 alle 08 43 11](https://private-user-images.githubusercontent.com/60701536/253869975-e4474412-01b4-44c7-bfeb-895fb23e9812.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ4NzY2NzAsIm5iZiI6MTcyNDg3NjM3MCwicGF0aCI6Ii82MDcwMTUzNi8yNTM4Njk5NzUtZTQ0NzQ0MTItMDFiNC00NGM3LWJmZWItODk1ZmIyM2U5ODEyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI4VDIwMTkzMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM0YWY4YzU4NmQ5MjgzYzUxODMyNTBkNGJkZDM3NWZhMmY5YmI4ZDVmYmQ4YzMzZWMxMWEwMzFlOGU3ZTc4YzEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gB52GBv1HUpFBtoRnFzJ8GhVDKRifbKtV2gqPXerFbk)
my fix for this was this:
in app.css
[type='text']:focus {
@apply ring-transparent;
}