Использование .focus css

Question

У меня есть виджет, который при наведении мыши разворачивается из свернутого состояния, а при отведении мыши возвращается в исходное состояние. Нужно, если курсор на элементе, чтобы он в исходное состояние не возвращался. Как правильно использовать фокус?

.top_line_widget {
  display: flex;
  padding: 3px 460px;
}

.search {
  display: flex;
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 5px;
}

.search_btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  color: #ffffff;
  cursor: pointer;
}

.search_text {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  color: #ffffff;
  font-size: 12px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
  font-width: bold;
}

.search:hover>.search_text {
  width: 910px;
  padding: 0 6px;
}

.search:hover>.search_btn:hover {
  background: linear-gradient(45deg, #ffa500, #ff2400);
}

<div class="top_line_widget">
  <div class="search">
    <input type="text" class="search_text" placeholder="Введите имя или фамилию" />
    <img class="search_btn" src=".\static\images\phone_book.png">
  </div>
</div>

Пробовал решить вопрос добавлением в CSS - не сработало:

.search:focus > .search_text{
  width:910px;
  padding: 0 6px;
}

Answer 1

Воспользуйтесь псевдоклассом :focus-within:

.top_line_widget {
  display: flex;
  padding: 3px 460px;
}

.search {
  display: flex;
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 5px;
}

.search_btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  color: #ffffff;
  cursor: pointer;
}

.search_text {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  color: #ffffff;
  font-size: 12px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
  font-width: bold;
}

.search:hover>.search_text,
.search:focus-within>.search_text {
  width: 910px;
  padding: 0 6px;
}

.search:hover>.search_btn:hover {
  background: linear-gradient(45deg, #ffa500, #ff2400);
}

<div class="top_line_widget">
  <div class="search">
    <input type="text" class="search_text" placeholder="Введите имя или фамилию" />
    <img class="search_btn" src=".\static\images\phone_book.png">
  </div>
</div>

БЛОГ НА HUSL

Использование .focus css

Ответы (1 шт):