Outlining some :focus

I’ve been working with Gravity Forms A LOT lately and I’ve found that the default form CSS applies outline: 0; and outline-style: none; on form elements in focus. This is bad.

For people that are accustomed to navigating forms via their keyboard it is extremely confusing to have nothing happen when you navigate to a form element. It’s not too awful when it’s a text input because the cursor appears (or text is highlighted), but for select (dropdown) elements it is horrible.

Of course you can opt not to use the Gravity Form default styles, but on the whole they’re nice. So, if you’d like to get your form focus styles closer to default try something like this in your theme’s stylesheet:

div.gform_wrapper :focus {
	outline: #7DE8E0 5px auto;
}

Related Reading

• 456 Berea St: Do not remove the outline from links and form controls
• 24 ways: Don’t lose your :focus