Changing label border-color when input:focus

Question

With just CSS I want do change the <label> border-color when input:focus.

HTML:

<label for="s">
        <input name="s" placeholder="search">
</label>

CSS:

label { 
      border: 3px solid red; /* THIS SHOULD CHANGE */
}

input:focus ~ label {
       border-color: yellow; /* WHEN "input:blur" <label> border-color should be yellow */
}

Here what I did until now: http://jsfiddle.net/s6Zc9/2/

Thank you.

as far as i know there is no :blur pseudo-class in CSS – Juan Mar 12 '14 at 00:41 — Juan, Mar 12 '14 at 00:41
Oh, my mistake. I mean "focus". Thank you! – Programmeur Mar 12 '14 at 00:46 — Programmeur, Mar 12 '14 at 00:46

score 2 · Accepted Answer · answered Mar 12 '14 at 01:00

2

you're looking for a css parent selector, which also doesn't exists. You could do it with jquery

DEMO

$("label input").on("focus blur",function(){
    $(this).parent().toggleClass("focused");
});

.focused{
    border-color: yellow;
}

answered Mar 12 '14 at 01:00

Juan

4,910
3
37
46

After your comment I updated the question. I made a mistake, but ":focus" is what I really want to use. Anyway, thank you for your solution. I will wait for some CSS-only answer, but yours is the best so far. Thank you very much! =) – Programmeur Mar 12 '14 at 01:31

score 0 · Answer 2 · edited May 23 '17 at 12:01

I believe there is no :blur pseudo-class in CSS.

The dynamic pseudo-classes in CSS represent states; they don't represent events or transitions between states in terms of the DOM. To wit: the :focus pseudo-class represents an element that is in focus; it does not represent an element that has just received focus, nor does there exist a :blur pseudo-class to represent an element that has just lost focus.

Similarly, this applies to the :hover pseudo-class. While it represents an element which has a pointing device over it, there is neither a :mouseover pseudo-class for an element that has just been pointed to nor a :mouseout pseudo-class for an element that has just been pointed away from.

If you need to apply styles to an element that is not in focus, you have two choices:

Use :not(:focus) (with less browser support):

input:not(:focus), button:not(:focus) {
    /* Styles for only form inputs and buttons that do not have focus */
}

Declare a rule that applies to any element regardless of its focus state, and override for elements that have focus:

input, button {
    /* Styles for all form inputs and buttons */
}

input:focus, button:focus {
    /* Styles for only form inputs and buttons that have focus */
}

THIS ANSWER WAS ORIGINALLY POSTED BY BOLTCLOCK (HERE)

Hello. It was a mistake of mine. I want to use :focus. Sorry! :( — Programmeur, Mar 12 '14 at 00:49

Changing label border-color when input:focus

2 Answers2