Question

I have a form where I placed my labels before inputs like this:

<label for="email">Confirm Email</label>
<input type="text" id="email" />
<label for="firstname">First Name</label>
<input type="text" id="firstname" />
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
<label for="company">Company</label>
<input type="text" id="company" />

When I try to use the CSS to style the label, when I hover the inputs like this (input:hover + label), the CSS applies on the next label instead on the one that has the for= property. For example, if I try to hover the email input, it will apply the input:hover+label effect on the 2nd label with for="firstname".

My design structure has labels on top and inputs under them, so I can’t switch their position.

Is there any solution to this?

Answer 1

With some clever CSS you can have the label after the input, but still have the label look like it’s on top of the input http://jsfiddle.net/8YqN2/2/

<input type="text" id="email" />
<label for="email">Confirm Email</label>    
<input type="text" id="firstname" />
<label for="firstname">First Name</label>    
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>    
<input type="text" id="company" /> 
<label for="company">Company</label>

CSS

input:hover + label  {
  background-color: #eee;
}

input {
  position: relative;
  display: block;
  margin-top: 1.5em;
}

label {
  display: block;
  position: relative;
  top: -2.5em;
}

I don’t think this is possible with CSS alone, if you can live with the effect for users with JS enabled, you can use the following. http://jsfiddle.net/8YqN2/1/

$('input').hover(
  function(){
    $(this).prev().addClass('hover');
  },
  function(){
    $(this).prev().removeClass('hover');
  }
);

label.hover  {
  background-color: #eee;
} ​

​