input border active issue
hi guys how I remove this, I try to manually input this in css like input:active - > border: none but suddenly this border still showing on my website. Hope u can help me, thank you!
5 Replies
probably it is the
outline on :focus but for us to be able to look at it, it's much easier if we have a live example instead of a screenshot of the code. On https://play.tailwindcss.com/ you can share your codeTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
just imagine that there is an arrow, because it is saved in my folder
well, there is no border, only a outline when focussed. you can set
outline: none to hide that.
But, by disabling this, people who navigate the site with a keyboard (tabbing) will not see the input being active. for that you can use the :focus-visible selector to set the outline back.
But, browsers can force the line to show in some cases (like inputs) if the browser thinks it's nessesary , that could be the case for your browser with this example. (https://hidde.blog/focus-visible-more-than-keyboard/)Hidde's blog
With :focus-visible, you can have focus styles when it makes sense
On why :focus-visible is more than a way to target keyboard users only.
I will check this sir, thanks for this 