In HTML & CSS can I change the background of a parent DIV when focused on a textbox?

Question

I have read about not being able to change the parent in CSS using pseudo classes such as :focus, so I am here to see if I am doing something wrong or if there is a javascript alternative.

I'd prefer not to use javascript at all though, if possible.

Here is my current code:

.box:focus .test{
background: #00FF00;
}

So that code should change the background of the DIV .test to green when I click inside the textbox .box.

However this dosen't work, please could someone point me in the right direction, thanks.

Here is a code snippet of my HTML, this is a test page so I can see how this works.

<input name="textfield" type="text" class="box" id="textfield" />

<div class="test" id="test">Content for  id "test" Goes Here</div>

In javascript, yes, easily. Unfortunately, CSS has no access to the "previous" element or the "parent" element of the initial selection. — alt, Aug 18 '12 at 22:35
It might be possible in [CSS4](http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject) (- from [this answer](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child/45530#45530)), but there is currently no support in any browser. — RichardTowers, Aug 18 '12 at 22:40

alt · Answer 1 · 2012-08-19T00:04:52.237

3

In javascript, I'd install the jQuery library if you're goign to be writing a lot of it. Here's a bit of jQuery that'll change the parent css:

var parent = $(this).parent()

$('.box').focusin(function(){
    parent.css('background','#00FF00')
}).focusout(function(){
    parent.parent().css('background','transparent')
})

edited Aug 19 '12 at 00:04

answered Aug 18 '12 at 23:15

alt

13,357
19
80
120

score 3 · Accepted Answer · answered Aug 18 '12 at 23:59

This is actualy possible without using javascript. There is indeed no way to select a parent, but you can select a sibling using css. I set up a small example here: http://jsfiddle.net/k2dAp/1/

HTML

<div class='container'>
<input type='text' />
<div class='background'></div>
</div>

CSS

.container {
  border: red solid 1px; 
  position: relative;    
}
.background {
  position: absolute;
  background: grey;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;   
}
input {
  margin: 10px;   
}
input:focus + .background {
  background: green;   
}

As you can see i added an extra div that will act as the background by adding absolute positioning and z-index. Then you can access it with the + selector. This will not be compatible with the old versions of IE but should work fine in modern browsers and degrade garcefully. Adding js will probably work in more browsers, but offcourse not for people with js disabled.

score 2 · Answer 3 · answered Aug 18 '12 at 22:34

2

can u give more details, like a code snippet or so...

js can do almost anything so the answer is yes there is an js alternative

answered Aug 18 '12 at 22:34

mc_fish

493
3
10

Yes, but I'd prefer not to use Javascript. I like to keep my web pages light. – joshkrz Aug 18 '12 at 22:37

score 2 · Answer 4 · answered Aug 18 '12 at 22:42

2

You can only do this via javascript like this using jquery

$("#textfield").click(function(){
$("#test").css('background-color','#333');
})

answered Aug 18 '12 at 22:42

omoabobade

515
5
16

Ok I suppose js will have to do. Thank you. – joshkrz Aug 18 '12 at 22:45
1

That will change the background, it won't go away after you click away. – alt Aug 18 '12 at 23:15
yep then he needs to do on mouseout() to remove the color – omoabobade Aug 18 '12 at 23:18
what if the input field gets accessed trough the keyboard (tab) in stead of the mouse? @JacksonGariety has the only correct js solution imo – Pevara Aug 19 '12 at 00:02
Yeah, a `click` isn't the same as a `focus`. – alt Aug 19 '12 at 00:04

In HTML & CSS can I change the background of a parent DIV when focused on a textbox?

4 Answers4