On Input :focus, Set Also Focus To Sibling Elements Without Using Javascript

My pen: https://codepen.io/helloworld/pen/XopoYa When I click into the input control the background gets gray. What I want is that the left and right colum also gets gray. How is t

Solution 1:

i changed html code orders and i made with order. order is a flexbox property.

#container {
    display: flex;
    background:orange;
   flex:1;
  width:100%;
  height:50px;
} 

.column.left {
  background:blue;
    width: 230px;
    flex: 00230px;
  order:1;
}
.column.right {
    width: 230px;
    flex: 00230px;
    border-left: 1px solid #eee;
  background: red;
  order:3;
}
.column.center {
    border-left: 1px solid #eee;
    flex-grow:1;
  background:white;
  border: 1px blue solid;
  order:2;
  
}
.column.center:focus,
.column.center:focus + .left,
.column.center:focus + .left + .right{
  background:gray;
}

<divid="container"><inputtype="search"class="column center"></input><divclass="column left">
    left
  </div><divclass="column right">
  right
  </div></div>

Solution 2:

To get this effect (without changing your markup) , you need a new pseudo-class focus-whitin, that is supported in modern browsers (that is, Chrome, Safari, Opera and Firefox )

#container {
    display: flex;
    background:orange;
   flex:1;
  width:100%;
  height:50px;
} 

.column.left {
  background:blue;
    width: 230px;
    flex: 00230px;
}
.column.right {
    width: 230px;
    flex: 00230px;
    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;
}
#container:focus-within .left,
#container:focus-within .right{
  background-color: gray;
}

<divid="container"><divclass="column left">
    left
  </div><inputtype="search"class="column center"></input><divclass="column right">
  right
  </div></div>