在输入：焦点，设置也集中到兄弟元素而不使用javascript [重复]

Question

这个问题在这里已有答案：

• Is there a “previous sibling” selector? 15个答案
• What does the “+” (plus sign) CSS selector mean? 11个答案

我的笔：https://codepen.io/helloworld/pen/XopoYa

当我点击输入控件时，背景变灰。

我想要的是左右列也变灰了。

如果不使用JS，这怎么可能？

HTML

 <div id="container">
  <div class="column left">
    left
  </div>
  <input type="search" class="column center">

  </input>
  <div class="column right">
  right
  </div>
</div>

CSS

#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;
}

Answer 1

我改变了html代码订单，我用order。 order是flexbox的财产。

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

.column.left {
  background:blue;
    width: 230px;
    flex: 0 0 230px;
  order:1;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    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;
}

<div id="container">
    <input type="search" class="column center">
    
  </input>
  <div class="column left">
    left
  </div>
  <div class="column right">
  right
  </div>
</div>

Answer 2

要获得此效果（不更改标记），您需要一个新的伪类焦点白化，现代浏览器（即Chrome，Safari，Opera和Firefox）支持

#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;
}
#container:focus-within .left,
#container:focus-within .right{
  background-color: gray;
}

<div id="container">
  <div class="column left">
    left
  </div>
  <input type="search" class="column center">
    
  </input>
  <div class="column right">
  right
  </div>
</div>