I've been looking at a bunch of forms and noticed that most form inputs do not have a hover state. Is there a good reason for this, that I'm missing?

A slight hover state, to me, is effective because while using a form input I might be looking at the left side and reading the label or placeholder text while I simultaneously scroll my mouse over the input field somewhere on the right.

Update from comments:

A few examples of sites with hover states would be Trello and Google Search

  • They have a hover state, but it only affects the cursor and not the field.
    – K..
    Commented Feb 8, 2013 at 7:06
  • 5
    Would be interested to see the behaviour of forms that do have such a hover state. Can you direct me at some examples please? Commented Feb 8, 2013 at 8:31
  • 2
    I think the answer is that "people don't necessarily look where the cursor is". You cannot replace an eye tracker with a mouse tracker, to use an obvious example. That said, I've seen several cases where the field is glowing or bordered when hovering (or when entering/"activating")... You'll also find examples of status-bar updating, hint label updating, cursor altering etc. Commented Feb 8, 2013 at 9:43
  • 1
    Because it's annoying. Most major OSes on major browse highlights the "active" form element because you usually only click form element that you want to interact with. With hover, it's not necessarily true that I'm interested in the form element where my mouse is.
    – Lie Ryan
    Commented Feb 8, 2013 at 15:21
  • So a few examples would be Zurb Foundation, Bootstrap, Teehan + Lax, and asana.
    – Jason
    Commented Feb 8, 2013 at 15:38

3 Answers 3


My answer to your question is a question: what problem would a hover state solve?

Every visual element on a form requires processing by the user's brain. And every additional bit of such cognitive effort increases the burden to the user, heightening the chance of fatigue, errors, confusion and abandonment.

Consequently, the most usable forms are designed by starting with a blank screen and only adding visual elements that help communicate to the user how to use the form. This is why text fields need a border (to communicate "here's the box you type in"), but thanks to our brains being especially wired to notice visual differences, that border doesn't need to be glowing and bright yellow – a simple grey or black one pixel line is enough.

So, if we come back to your question, having a field change its appearance on hover will add to the cognitive burden. Therefore, there needs to be a good reason to do it.

  • If you're concerned that people won't know which field to use, locating the field label in close proximity to the field, or using zebra striping, addresses this problem.
  • If you're worried that people will not know where they are up to, then you can relax, because this is indicated by all the fields prior being filled, and all the fields following being empty.
  • Perhaps you've seen lots of other forms do this? Unfortunately, web/desktop/mobile form design is as much a victim of useless fashion as any other field. And as we all know, fashion isn't necessarily functional, let alone a good idea.

I've tried to think of other reasons but can't – let me know if you do.

I would also support what Jørn and Lie have said: the eye is not necessarily where the mouse is. Given this, the hover state could actually be distracting and interrupt the user.

Finally, don't forget that not everybody uses a mouse.


I think that a simple hover state might just reimforce and make a form seems less dry.

Those little details when done right have a "je ne sais quoi", that influence a user in a positive way and might give the little push that might lead him to complete the form.

Web form should be more "fun" to fill than paper form and those little things when done right might do the trick.


Forms are ususally very straightforward - users are focused on them and in general if they WANT to complete them, they will, if they don't - no hover trickery will work. Therefore, there is no need to grab their attention. In the same time - man, if a field in form is not visible enough for a user to fill it in, the form is totally misdesigned.

The most natural (acually: learned) behavior of forms is to change states only when there are errors in them (and to confirm that data is ok). I think the only special states for fields should be reserved for these situations, not to introduce too muuch clutter.

From this point of view, a hover state on a field in a form gives nothing but clitter.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.