聚焦其中的输入时更改 div 背景颜色

Question

您好，我正在尝试通过单击其中的输入来更改 div 的样式。这是我的 HTML:

<li class="search-bar">
  <form action="" class="search-bar">
    <button class="search-btn">
      <i class="fas fa-search"></i>
    </button>
    <input placeholder="Search term..." type="text" />
  </form>
</li>

SCSS:

.search-btn,
input {
    background: transparent;
}

.search-bar {
    background: $light-grey;
    &:hover {
        background: $light-grey-hover;
    }
    &:focus {
        background: white;
    }
}

单击输入时，.search-bar 背景颜色不会改变。我想这是因为我实际上关注的是其中的输入，而不是 .search-bar div.

如何才能在关注输入时更改包含它的整个 div 的样式？这可以使用 css 吗？我应该使用 js 文件吗？

Answer 1

你可能会使用 :focus-within:

.search-bar {
  background: blue;
}

.search-bar:focus-within {
  background: green;
  /* and any style you want to reset */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<li class="search-bar">
  <form action="" class="search-bar">
    <button class="search-btn">
      <i class="fas fa-search"></i>
    </button>
    <input placeholder="Search term..." type="text" />
  </form>
</li>

聚焦其中的输入时更改 div 背景颜色

Changing div background color when focusing on an input inside it

css

input

focus

background-color