主页 / 问题 / 1004958
Accepted
HaZcker
Asked:2020-07-20 21:33:21 +0000 UTC2020-07-20 21:33:21 +0000 UTC

当焦点放在没有 JS 的输入上时，块周围的边框

  • 772

当焦点位于输入上时，如何在父块周围制作边框。在“header-search-wrapper”周围设置边框。但只有没有 JS，如果可能，你需要纯 CSS。有了 JS，我知道怎么做。

<div class="header-search-wrapper">
      <div class="header-search-content">
            <div class="h-s-w__input">
                <input type="text" placeholder="Search a product...">
            </div>
            <div class="h-s-w__submit"></div>
      </div>
</div>
css

1 个回答

  1. Best Answer

    .header-search-wrapper:focus-within {
  border: 1px solid red;
}

.header-search-wrapper {
  height: 100px;
}
    <form>
  <div class="header-search-wrapper">
    <div class="header-search-content">
      <div class="h-s-w__input">
        <input type="text" placeholder="Search a product...">
      </div>
      <div class="h-s-w__submit"></div>
    </div>
  </div>
</form>

    我们需要将所有内容包装在一个表单中并使用伪类。 边缘和 IE 不支持

    • 3

相关问题