why background color not change on focus of div?

Question

I have div in which I have input and button .I want to change the background-color of parent div when i focused to input div .but it is not working .Can we do this using css not javascript.

I tried like this

.a:focus{
  background-color:red;
  border:2px solid grey;
}

But it not work why ?

I want when I focus to input field than parent div which have class "a" will become background-color:red and border become red

here is my code https://jsbin.com/kimejehane/1/edit?html,css,output

<div class="a">
    <div class="b">
      <input type="text">
      <button>aa</button>
    </div>
  </div>

try `input:focus{ background-color:red; border:2px solid grey; }` — doğukan, Dec 09 '18 at 13:18
Possible duplicate of [Which HTML elements can receive focus?](https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus) — nitowa, Dec 09 '18 at 13:19
@DogukanCavus it only change the background of input to whole div — user944513, Dec 09 '18 at 13:29

score 3 · Accepted Answer · answered Dec 09 '18 at 13:41

3

If you want to change background of parant div having class b, then try out this.

.b:focus-within {
  background-color:red;
  border:2px solid grey;
}

answered Dec 09 '18 at 13:41

ImZedi

294
4
15

1

This is still a Working Draft in CSS Selectors Level 4 https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within – dippas Dec 09 '18 at 13:59

why background color not change on focus of div?

1 Answers1