Working with inputs in HTML and CSS is tough. What's even tougher: adding good user experience.
There's many stipulations and pragmatism over how you should style your inputs and whether or not you should show error states by changing border/text colors or if you should allow focus events to change up the styling.
In this tip, I want to add fuel to the fire by introducing you to a really cool effect called the focus ring.
Let's start off by defining a basic text input with some default styling with TailwindCSS:
<div class="p-6"> <input type="text" class="block w-64 rounded-lg border border-gray-300 bg-gray-100 p-4" placeholder="Enter your name..." /> </div>
That'll spit out a really generic looking input form:
When we click on this input, we actually get some default styling applied via Tailwind (it's a focus effect that changes the border color):
Let's get rid of this and instead replace it with a focus ring:
<div class="p-6"> <input type="text" class="block w-64 rounded-lg border border-gray-300 bg-gray-100 p-4 focus:ring-gray-400/30 focus:outline-none focus:ring-4" placeholder="Enter your name..." /> </div>
Here we added
focus:outline-none (this removes that default styling) and in its place we added
focus:ring-gray-400/30. Here's what that looks like:
Now that's a much better effect for our input.
Typically I like to use
ring-4 because it looks just big enough to grab the user's attention without being overly big.
Typically I set the ring color to be 1 shade darker than whatever the background color is.
Typically I transition the ring into view, to do this you can add
transition duration-300 ease-in-out to your input.