What can be done to make the ubiquitous form element a little more usable and appealing? That was a question we asked ourselves on a recent project and one of our answers was to highlight the active row. It’s easy to change the appearance of the active input element with the focus pseudo-class in css, but a quick Google search didn’t reveal an easy way to highlight the containing tr element and so I ended up rolling my own implementation.
And then I styled my rows in public/stylesheets/application.css:
To make the view a little cleaner I added a quick helper to helpers/application_helper.rb:
So now in your views all you have to do is add an element_options_with_highlight to the input elements in your forms: