0

Как сделать рамку вокруг родительского блока, при фокусе на input. Чтобы рамка была вокруг "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>

1 ответ 1

3

.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>

Нужен всё обернуть в форму и воспользоваться псевдоклассом. Не поддерживается edge и IE

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.