CODEWITHSUNDEEP
htmlcsscss-float
worenga
worenga

Reputation: 5856

toggling styles on label (active/focus) for input field with css only

Wondering whether if there is a css-only way to perform to toggle styles on the corresponding label on input's focus. So far I have:

    $(document).on('focus active', 'input',function(){
        $('label[for='+$(this).attr('id')+']').addClass('active');
    });
    $(document).on('blur', 'input',function(){
        $('label[for='+$(this).attr('id')+']').removeClass('active');
    });

HTML:

    <div class="row">
     <label for="contact_form_mail">Email</label>
     <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    </div>

And CSS:

.active{ color:red; }

Edit: I am surely aware of the child and sibling selectors "workarounds", but rearranging clean markup for the pure sake of styling seems not right, so if there is another pure css way this answer wins!

http://jsfiddle.net/fchWj/3/

Upvotes: 14

Views: 34799

Answers (7)

Li Zhen Wu
Li Zhen Wu

Reputation: 31

This give you label on top of input, highlight label while input focus.
HTML

<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>

<code>
.row{
    display:flex;
    flex-direction:column-reverse;
    align-self:flex-start;
 }
 .row input:focus{
     border: 1px solid red;
  }
  .row input:focus+label{
     color:red;
  }
  </code>

Upvotes: 3

Johnny Fekete
Johnny Fekete

Reputation: 311

It's possible with CSS only, without switching the order of the label and input. You can use a :focus-within CSS pseudo-class on the parent element, which applies to elements, that has a child element with the focus.

In your example, you could use the following:

.row:focus-within label {
    color: red;
}

Note, that this pseudo-class is relatively new, so only modern browsers support it.

Upvotes: 8

hennson
hennson

Reputation: 811

First we can use a selector that matches a label immediately followed by the input tag (input:focus + label). But there is still the problem, that the label follows after the actual input field. If one would like to have it above the text input we need to switch the positions of the controls. This can be done with a CSS pseudo-table. 

<div class="pseudo-table">
   <input id="yourname" name="yourname" type="text" placeholder="Name...">
   <label for="yourname">Name</label>
</div>

The style for the artifical table is...

.pseudo-table { display: table;  }

With this in place we could transform the label e.g. to a table-header-group:

label { display: table-header-group; }

and the input field to a table-row-group:

input { display: table-row-group; }

In combination with our followed by selector we're done and it looks right:

input:focus + label {
    color:red;
    font-weight: bold;
}

For a demo please see this Fiddle

HTH

Upvotes: 2

sjkm
sjkm

Reputation: 3937

There is no selector to match a preceding element... This matches a label immediately followed by an input tag. 

input:focus + label {
    color: red;
}

Upvotes: 1

Ali Bassam
Ali Bassam

Reputation: 9959

There is, but only if you place the label after the input.

<input name="field" type="text" />
<label for="field">Label Here</label>

input:focus + label{
    color: red;
}

Now if you want the label to be placed before it, then you need to do some css styling with position absolute to place the label before the input field, then add some margin left on the input to move it to the right.

<div>
    <input name="field" type="text" />
    <label for="field">Label Here</label>
</div>

div{
   position: relative;
}
input{
   margin-left: 40px;
}
label{
   position:absolute;
   left:0;
}

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157334

If you are willing to switch elements, than here you go

Demo

<div>
    <input type="text" />
    <label for="e_mail">E-Mail</label>
</div>

label {
    float: left;
    margin-right: 5px;
}

input[type=text]:focus + label {
    color: red;
}

Explanation: We are using + adjacent selector here, so when the textbox is focused, we select the label tag and apply color red

Note: Don't forget to clear floats ;)

Upvotes: 15

PSL
PSL

Reputation: 123739

Try this way:- Place your label after input and float it left. And apply siblings.

Html

<div class="row">
    <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    <label for="contact_form_mail">Email</label>
</div>

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

Demo

This is a hack to get the adjacent sibling selector work as it applies only on the following element and not the preceding one. ~ will select all the adjascent siblings after this element. So if you are having different .row for each section of inputs then use +.

Upvotes: 21

Related Questions