0

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?

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Pacuraru Daniel
  • 1,207
  • 9
  • 30
  • 56
  • 1
    Possible duplicate of [Selecting a label placed before an input in various states](http://stackoverflow.com/questions/36647427/selecting-a-label-placed-before-an-input-in-various-states) – Zach Saucier Apr 15 '16 at 14:57

3 Answers3

3

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;
} ​

​

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • this is exactly what i've done and it looks OK :) Thank you very much, Juan Mendes! – Pacuraru Daniel May 02 '12 at 07:59
  • This is a pretty ghetto solution. A better solution in modern times would be to use flexbox – Zach Saucier Apr 15 '16 at 14:56
  • @ZachSaucier Thanks for your comment but you do realize this was written in 2012, and that flex-boxes aren't well supported even in 2016? – Ruan Mendes Apr 15 '16 at 15:12
  • Absolutely. That is why I commented - to point readers to better alternatives – Zach Saucier Apr 15 '16 at 15:13
  • Also, if you read the restrictions from the OP about reworking the HTML, it doesn't sound like they would be able to rework the HTML to use flex-boxes – Ruan Mendes Apr 15 '16 at 15:15
  • Sure there is. Take a look at [the recent duplicate question](http://stackoverflow.com/questions/36647427/selecting-a-label-placed-before-an-input-in-various-states) – Zach Saucier Apr 16 '16 at 17:39
2

You're doing it wrong. The "+" sign is an "adjacent sibling selector".

The selector matches an element which is the next sibling to the first element.

In your case, the selector matches the label element which is the next sibling to input:hover.

CSS doesn't care about the for attribute, it cares about id, class, and the hierarchy of the elements.

You haven't mentioned what it is you want to accomplish exatly, but give this a shot:

HTML

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

CSS

label:hover { /* something */ }

Wrap the "label" text in a <span> tag if you need to.

Ayman Safadi
  • 11,502
  • 1
  • 27
  • 41
-1

I hope this helps

<div class="nina">
    <label for="email" id="em">Confirm Email</label>
    <input type="text" id="email" onmouseover="document.getElementById('em').style.color='red'" onmouseout="document.getElementById('em').style.color='black'" />
    <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" />

</div>

this without jquery

Iori Yagami
  • 134
  • 4