Disabling the Tailwind input ring
source link: https://dev.to/romansorin/disabling-the-tailwind-input-ring-4624
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
If you’ve ever worked with Tailwind components or TailwindUI, you’ve probably come across the “focus ring”. On inputs (checkboxes, fields, etc.), this ring is shown when you’ve clicked or tabbed onto a component, indicating that you have selected it. Here’s an example:
Disabling the ring
I’ve seen myself and others try to disable this by simply calling the focus:ring-0
utility. This sort of works, but gives us this weird shadowing effect on the corners of our input:
By default, Tailwind will include this ring and an offset on certain input elements like checkboxes. If you’d rather not have this ring on all interactions, you can easily disable it:
<input type="checkbox" className="focus:ring-0 focus:ring-offset-0" />
Enter fullscreen mode
Exit fullscreen mode
With this, we’re able to get a nice looking checkbox, without the “ugly” looking ring:
Keeping things clean
To reduce redundancy across my project, I created a class that I can globally apply:
.without-ring {
@apply focus:ring-0 focus:ring-offset-0;
}
Enter fullscreen mode
Exit fullscreen mode
Now, instead of re-defining these utilities on all of my inputs, I can use the without-ring
class to achieve the desired output:
<input type="checkbox" className="without-ring" />
Enter fullscreen mode
Exit fullscreen mode
Keeping it accessible
Accessibility is important, but to keep it short, I won’t cover it here. Instead, this post by David Gilbertson provides a simple, framework-agnostic solution to showing the focus ring only when a user is tabbing and making it hidden otherwise.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK