Css：关注内部输入

嗨，当我的输入有焦点时，我正在尝试改变背景颜色 但我不明白，我看到这是可能的：聚焦内部

我不想为此编写javascript代码 但我无法应用焦点：在内部

代码：

示例工作：

---

更新：第二个更好的解决方案似乎也能奏效：

您可以使用.iconWrap选择器中的

.collapse:focus。在Chrome和Firefox上运行良好

代码沙盒示例：


另一个更复杂的解决方案：

我已经更改了图标div的顺序和标记中的输入。然后我添加了一个
flex-direction:row-reverse到SCS中的
.collapse
选择器。这将颠倒元素的顺序，使其恢复到以前的状态

导出默认函数App（）{
返回(
);
}

（注意iconWrap现在在输入之后的状态。）

此移动允许我们使用
~
CSS选择器，此选择器选择前面有其他内容的元素，在本例中，我们需要前面有
的
.iconWrap
。searchBox:focus in
元素（注意此处的伪选择器）
.searchBox:焦点在~.iconWrap内{
背景：红色；
}

每当搜索框有焦点时，这将使图标背景变为红色

Codesandbox示例：（图标背景在焦点处变为红色）。
您的Codesandbox示例对我来说似乎很好（谷歌浏览器）。你能解释一下想要的行为是什么吗？在我的输入中它真的有效我在我的图标的div中说话它真的有效谢谢你能帮我一下吗？当我增加大小输入时，我对添加一个转换有点迷茫。我不知道在哪里可以不受监管。我也认为我可以改进，因为我用flex display编写了代码。如果我可以改进一些东西来减小css大小，你能帮我吗？@gabriel问第一个问题：添加
转换：0.2s放松一切到.searchBox（或任何其他元素）。@gabriel对于第二个问题，代码并没有那么糟糕。有一件事让我有点难过，那就是必须给图标和输入包装器指定边框半径。这听起来有点难看。你能看看这个例子吗？带有过渡外观div图标
export default function App() {
  return (
    <Styled.SearchWrapper>
      <div className="collapse">
        <div className="iconWrap">
          <FontAwesomeIcon className="searchIcon" icon={faCoffee} />
        </div>
        <input
          className="searchBox"
          type="search"
          name="search"
          placeholder="Search..."
        />
      </div>
    </Styled.SearchWrapper>
  );
}

import styled from "styled-components";

export const FlexCotainer = styled.div`
  height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
`;

const SearchWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  & .collapse {
    margin-left: 1em;
    display: inline-flex;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.14);
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.07);
  }
  .iconWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
  }
  & .searchIcon {
    padding: 0.5rem;
    color: white;
  }
  & .searchBox {
    border: 0;
    background: transparent !important;
    font-size: 14px;
    padding: 0.75em 1em;
    min-width: 200px;
    max-width: 100%;
    transition: 0.2s all;
    flex: 1;
    :focus-within {
      min-width: 300px;
      outline: none;
      border-radius: 5px;
      background: #fff !important;
      box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.07);
    }
  }
`;

export const Styled = {
  SearchWrapper
};