CODEWITHSUNDEEP
css
Programmeur
Programmeur

Reputation: 1531

Changing label border-color when input:focus

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.

Upvotes: 2

Views: 12360

Answers (2)

Juan
Juan

Reputation: 5050

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

Upvotes: 2

matcartmill
matcartmill

Reputation: 1593

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)

Upvotes: 0

Related Questions