title: on input :focus, set also focus to sibling elements without using javascript
body: <p>My pen: <a href="https://codepen.io/helloworld/pen/XopoYa" rel="nofollow noreferrer">https://codepen.io/helloworld/pen/XopoYa</a></p>
  
  <p>When I click into the input control the background gets gray.</p>
  
  <p>What I want is that the left and right colum also gets gray.</p>
  
  <p>How is that possible without using JS?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div id="container"&gt;
    &lt;div class="column left"&gt;
      left
    &lt;/div&gt;
    &lt;input type="search" class="column center"&gt;
  
    &lt;/input&gt;
    &lt;div class="column right"&gt;
    right
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container {
      display: flex;
      background:orange;
     flex:1;
    width:100%;
    height:50px;
  } 
  
  .column.left {
    background:blue;
      width: 230px;
      flex: 0 0 230px;
  }
  .column.right {
      width: 230px;
      flex: 0 0 230px;
      border-left: 1px solid #eee;
    background: red;
  }
  .column.center {
      border-left: 1px solid #eee;
      flex-grow:1;
    background:white;
    border: 1px blue solid;
  
  }
  .column.center:focus{
    background:gray;
  }
  </code></pre>