Html 在input:focus上，在不使用javascript的情况下也将focus设置为兄弟元素

我的笔：

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

我想要的是左边和右边的柱也变成灰色

如果不使用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>

---

我更改了html代码顺序，并使用

order

进行了修改<代码>顺序是一个

flexbox

属性

#容器{
显示器：flex；
背景：橙色；
弹性：1；
宽度：100%；
高度：50px；
} 
.左栏{
背景：蓝色；
宽度：230px；
flex:0230px；
顺序：1；
}
.column.right{
宽度：230px；
flex:0230px；
左边框：1px实心#eee；
背景：红色；
顺序：3；
}
.圆柱中心{
左边框：1px实心#eee；
柔性生长：1；
背景：白色；
边框：1px蓝色实心；
顺序：2；
}
.column.center：焦点，
.列.中心：焦点+.左，
.柱.中心：焦点+.左+.右{
背景：灰色；
}

左边
正确的

我更改了html代码顺序，并使用

顺序进行了修改<代码>顺序

是一个

flexbox

属性

#容器{
显示器：flex；
背景：橙色；
弹性：1；
宽度：100%；
高度：50px；
} 
.左栏{
背景：蓝色；
宽度：230px；
flex:0230px；
顺序：1；
}
.column.right{
宽度：230px；
flex:0230px；
左边框：1px实心#eee；
背景：红色；
顺序：3；
}
.圆柱中心{
左边框：1px实心#eee；
柔性生长：1；
背景：白色；
边框：1px蓝色实心；
顺序：2；
}
.column.center：焦点，
.列.中心：焦点+.左，
.柱.中心：焦点+.左+.右{
背景：灰色；
}

左边
正确的

要获得这种效果（不更改标记），您需要一个新的伪类focus whitin，它在现代浏览器（即Chrome、Safari、Opera和Firefox）中受支持

#容器{
显示器：flex；
背景：橙色；
弹性：1；
宽度：100%；
高度：50px；
} 
.左栏{
背景：蓝色；
宽度：230px；
flex:0230px；
}
.column.right{
宽度：230px；
flex:0230px；
左边框：1px实心#eee；
背景：红色；
}
.圆柱中心{
左边框：1px实心#eee；
柔性生长：1；
背景：白色；
边框：1px蓝色实心；
}
.column.center:焦点{
背景：灰色；
}
#容器：焦点在。左，
#容器：关注内部。对吗{
背景颜色：灰色；
}

左边
正确的

要获得这种效果（不更改标记），您需要一个新的伪类focus whitin，它在现代浏览器（即Chrome、Safari、Opera和Firefox）中受支持

#容器{
显示器：flex；
背景：橙色；
弹性：1；
宽度：100%；
高度：50px；
} 
.左栏{
背景：蓝色；
宽度：230px；
flex:0230px；
}
.column.right{
宽度：230px；
flex:0230px；
左边框：1px实心#eee；
背景：红色；
}
.圆柱中心{
左边框：1px实心#eee；
柔性生长：1；
背景：白色；
边框：1px蓝色实心；
}
.column.center:焦点{
背景：灰色；
}
#容器：焦点在。左，
#容器：关注内部。对吗{
背景颜色：灰色；
}

左边
正确的

有趣且有创意的解决方案，因为我不必使用IE/Edge不支持的焦点。有趣且有创意的解决方案，因为我不必使用IE/Edge不支持的焦点。

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