html - 焦点不起作用

Question

我有以下代码:JSBin .

我希望两个 flex-boxes 最初有灰色作为背景，一旦我们点击一​​个框，它的整个背景变成白色。 .flex-box .col textarea:focus 按预期工作，而 .flex-box .col:focus 不起作用:文本的背景颜色(例如，html, css) 总是灰色的。

谁知道这是怎么回事？

.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>

编辑 1:

实际上，一旦我们点击一​​个框的文本区域，我希望它的标题背景也系统地变成白色。使用 JavaScript 设置事件监听器让我很烦(因为我已经有几个事件监听器了)。难道没有办法仅通过 CSS 来实现这一点吗？

Answer 1

这是因为 textarea 得到的是 :focus 而不是 div。单独使用 CSS 实现结果的一种方法是为背景添加一个额外的 div 并在 textarea 获得焦点时使用兄弟选择器。

.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>