Focus does not work

Question

I have the following code: JSBin.

I want the two flex-boxes to initially have grey as background, once we click on one box, its ENTIRE background becomes white. .flex-box .col textarea:focus works as expected, whereas .flex-box .col:focus does not work: the background colour of the text (eg, html, css) is always grey.

Does anyone know what's wrong?

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid green;
  flex: 1;
  overflow-y: auto;
  overflow-x: hide;
  background: #F7F7F7;
}
.flex-box .col textarea {
  position: relative;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  font-family: monospace;
  background: #F7F7F7;
}
.flex-box .col:focus {
  background: white;
}
.flex-box .col textarea:focus {
  outline: none;
  background: white;
}

<div class="flex-box">
  <div class="col" id="html-panel">
    <h2>html</h2>
    <textarea name="html"></textarea>
  </div>
  <div class="col" id="css-panel">
    <h2>css</h2>
    <textarea name="css"></textarea>
  </div>
</div>

Edit 1:

Actually, once we click on the textarea of a box, I want the background of its title to also become white systematically. It annoys me to set an event listener with JavaScript (because I have already several event listeners). Isn't there a way to realise this with CSS alone?

It's because only textarea gets focus. – Gray Fox Dec 25 '16 at 06:00 — Gray Fox, Dec 25 '16 at 06:00

Hidden Hobbes · Accepted Answer · 2016-12-25T07:58:02.947

This is because the textarea gets :focus not the div. One way to achieve your result with CSS alone is to add an extra div for the background and use the sibling selector when the textarea is focused.

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}
.flex-box .col {
  border: 1px solid green;
  flex: 1;
  overflow-y: auto;
  overflow-x: hide;
  background: #F7F7F7;
  Position: relative;
}
.flex-box .col textarea {
  position: relative;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  font-family: monospace;
  background: #F7F7F7;
  Z-index: 1;
}
.flex-box .col label {
  display: block;
  font-size: 2em;
  font-weight: bold;
  padding: 10px;
  position: relative;
  Z-index: 1;
}
.flex-box .col:focus {
  background: white;
}
.flex-box .col textarea:focus {
  outline: none;
  background: white;
}
.flex-box .col .background {
  Position: absolute;
  Top: 0;
  Left: 0;
  Right: 0;
  Bottom: 0;
  Height: 100%;
  Width: 100%;
  Z-index: 0;
}
.flex-box .col textarea:focus ~ .background {
  background: white;
}

<div class="flex-box">
  <div class="col" id="html-panel">
    <label for="html">html</label>
    <textarea id="html" name="html"></textarea>
    <div class="background"></div>
  </div>
  <div class="col" id="css-panel">
    <label for="css">css</label>
    <textarea id="css" name="css"></textarea>
    <div class="background"></div>
  </div>
</div>

Will tidy this answer up a bit later - difficult to answer on a mobile! — Hidden Hobbes, Dec 25 '16 at 06:43
Thanks for the idea... I am building [this](https://jsbin.com/rujife/11/edit?html,css,output): once we click on the title, I want its col (including its textarea) to become white as well (sorry it was not clear in the beginning). I am still debugging this... — , Dec 25 '16 at 07:35
Nice... I have also debugged [the mine](https://jsbin.com/rujife/19/edit?html,css,output), but I think using `label` is definitely better... — , Dec 25 '16 at 08:03

Focus does not work

1 Answers1