CODEWITHSUNDEEP
htmlcssinputlabel
Pacuraru Daniel
Pacuraru Daniel

Reputation: 1205

HTML label before input CSS hover states

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?

Upvotes: 0

Views: 23577

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92314

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

​

Upvotes: 3

Iori Yagami
Iori Yagami

Reputation: 134

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

Upvotes: -1

Ayman Safadi
Ayman Safadi

Reputation: 11552

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.

Upvotes: 3

Related Questions