5

Am trying to change the background color of an input holder once the input is clicked i used these

<div class="name"> <input type="text" class="input-name"></div>

CSS

.input-name:focus + .name{
background:#f00;
}

this is how it is normally enter image description here

this is what i want on focus enter image description here

but it wont Work

Ghostff
  • 1,407
  • 3
  • 18
  • 30
  • possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Paulie_D Oct 27 '14 at 16:29

4 Answers4

5

You cannot select a parent element with CSS.

However. you can fake something similar with a box shadow

body {
    margin: 25px; /* not required */
}

.input-name:focus {
    box-shadow:0 0 0 10px red;
}
<div class="name">
    <input type="text" class="input-name" />
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

Unfortunately, you can't select a parent with CSS.

Is there a CSS parent selector?

This will have to be done via script.

(function() {
    var inputs = document.getElementsByClassName('input-name');
    if( !(inputs && inputs.length) ) return;

    function toggleRed(elem) {
        elem.classList.toggle('red');
    }

    for(var i=0; i < inputs.length; i++) {
        var input = inputs[i];

        // focus
        input.addEventListener('focus', function() {
             toggleRed(this.parentElement);
        });

        // blur
        input.addEventListener('blur', function() {
             toggleRed(this.parentElement);
        });
    }
})();

Check this for a demo

http://jsfiddle.net/andyw_/6ec1efs2/1/

Community
  • 1
  • 1
andyw_
  • 490
  • 5
  • 15
  • how do i add more class to it am trying this var inputs = document.getElementsByClassName('input-name', 'input-email', 'input-pass'); – Ghostff Oct 27 '14 at 17:10
  • Ideally, you'd use a class for those elements that are meant to have the same effect i.e. `class="js-redhover"`. If you really need to select multiple classes, you would simply select the other classes with `document.getElementsByClassName` and concatenate the results together https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat – andyw_ Oct 27 '14 at 17:18
  • sorry didnt help can u make some changes for me – Ghostff Oct 27 '14 at 17:57
  • 1
    http://jsfiddle.net/doiks14/6ec1efs2/2/ - simply introduced a new class to assign to all the elements I want to attach the effect to – andyw_ Oct 28 '14 at 09:27
1

While the exact thing you want can't be done, @Paulie_D 's answer was the closest with pure css.

To do exactly what you wanted you would need to use javascript because, as aforementioned, you can't select a parent element.

Here's the javascript:

function myFunction() {
document.getElementById("name").style.background = "red";

}

And the HTML:

<div id="name>
<input type="text" id="input" onfocus="myFunction()">
1

You can use pseudo-class :has(child) so:

.name:has(.input-name:focus-visible) {
     background:#f00;
}
Constantine
  • 11
  • 1