Css change color on parent

Question

Is there a way to change color off a parent when an input gets focus Check out the demo. I want the div to be red instead of blue when input has focus.

Demo

No there isn't currently: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Ron van der Heijden, Aug 20 '13 at 13:36
You'd think, by now, the smart people writing the specifications would have realized the need to be able to traverse the DOM in both directions. — crush, Aug 20 '13 at 13:37

score 5 · Accepted Answer · answered Aug 20 '13 at 13:50

5

Here's a bit of a cheaty way of doing it using CSS only...

DEMO: http://jsfiddle.net/gvee/6fRUd/

HTML

<div>
    <input type="text" />
</div>

CSS

div {
    overflow: hidden;
    background-color: blue;
}
div * {
    position: relative;
    z-index: 10;
}
div input[type=text]:focus {
    background-color: red;
    box-shadow: 0 0 10000px 10000px lime;
    z-index: 5;
}

answered Aug 20 '13 at 13:50

gvee

16,732
35
50

I like this but the `box-shadow` hides any other elements. – iambriansreed Aug 20 '13 at 13:55
@iambriansreed fixed that issue. See changes :) – gvee Aug 20 '13 at 13:55
Nice. I'd +1 again if I could. I really don't think I have seen `box-shadow` used like that. Really neat. – iambriansreed Aug 20 '13 at 13:56
Creative. I wonder how this impacts performance on slower computers. Of course, computers that would probably have a problem with this are probably using a browser that doesn't support `box-shadow` lol – crush Aug 20 '13 at 14:33

score 1 · Answer 2 · answered Aug 20 '13 at 13:41

I think you can't do that in pure CSS, but you can use Javascript:

http://jsbin.com/uvon/1/edit?html,js,output

var input = document.getElementById('input');
var div = document.getElementById('div');

input.onfocus = function(){
  input.style.backgroundColor = "red";
  div.style.backgroundColor = "red";
}

input.onblur = function(){
  input.style.backgroundColor = "white";
  div.style.backgroundColor = "blue";
}

score 1 · Answer 3 · answered Aug 20 '13 at 13:42

1

A jQuery approach would be using .parent()

<script>$("p").parent(".selected").css("background", "yellow");</script>

http://api.jquery.com/parent/

answered Aug 20 '13 at 13:42

James Nicholson

987
10
20

score 1 · Answer 4 · answered Aug 20 '13 at 13:53

1

CSS Only Approach

Fiddle

http://jsfiddle.net/GT5sT/

CSS

input {
    position: relative;
    z-index: 2;
}
input:focus,
input:focus + div { background-color: red }
div {
    position: relative;
    background-color: blue;
}
div.background-hack {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

HTML

<div>
    <input />
    <div class="background-hack"></div>
</div>

answered Aug 20 '13 at 13:53

iambriansreed

21,935
6
63
79

Updated fiddle with a few minor changes for your perusal: http://jsfiddle.net/gvee/GT5sT/1/ – gvee Aug 20 '13 at 14:09
Nice. I was going to go there until I saw your answer. Less html the better which is what you have. – iambriansreed Aug 20 '13 at 14:10

score 0 · Answer 5 · answered Aug 20 '13 at 13:40

0

You will have to use javascript.

Here is a short script using jquery.

$('#input').focus(function(){
  $('#box').css('background-color','red');
});

This is assuming your input has an id of input and blue box has an id of box.

answered Aug 20 '13 at 13:40

Wouldn't using `.parent()` be better? `$('input').focus(function(){ $(this).parent().css('background-color', 'red'); });` – gvee Aug 20 '13 at 14:10
Yeah it would he if they are going to have multiple instances of this on the page. – Aug 20 '13 at 16:03

score 0 · Answer 6 · answered Aug 20 '13 at 14:10

javascript also works here look at the code below,it is more flexible than just using css

<!DOCTYPE html>
<html>
<head>
  <script>
    function myFunction(){
      document.getElementById('box').style.background="red";

    }
  </script>  
<title>JS Bin</title>
</head>
<body>
  <div id="box" style="background-color:blue">
    <input onfocus="myFunction()" />
  </div>
</body>
</html>

Css change color on parent

6 Answers6

HTML

CSS