Расширьте поле ввода поиска при вводе в div, используя CSS 3 - PullRequest
Новая
       6

Расширьте поле ввода поиска при вводе в div, используя CSS 3

2 голосов
/ 20 апреля 2020

Я создал собственное «окно поиска». «Поле поиска» на самом деле построено с помощью div и ввода текста внутри него. Позже я добавлю значок «Поиск» слева и кнопку «Очистить» справа.

Проблема в том, что вход внутри div уже имеет размеры в зависимости от его контейнера и когда я фокусирую ввода текста, я не мог найти способ расширить родительский div (вместо самого ввода). Важно, чтобы div расширялся, поэтому значки и кнопки, которые я добавлю позже, будут расширяться вместе с вводом. Не удалось найти способ сделать это только с CSS (без JS).

Буду признателен за вашу помощь! 

<!DOCTYPE html>
<html>
<head>
<style> 
* {
 box-sizing: border-box;
}

.App {
  width: 100%;
  height: 200px;
  background-color: tan;
}

.fieldcontainer {
  display: flex;

  padding-left: 8px;
  background-color: #CCCCCC;
  border-color: grey;
  width: 300px;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  cursor: default;
  transition: 'background-color' 0.4s;
}

.fieldcontainer:hover {
  background-color: #C3C3C3;
}

.searchfield {
  background-color: inherit;
  font-size: 1em;
  border: 0;
  flex-grow: 8;
  
  transition: all 0.4s linear;
}

.searchfield:focus {
  outline: none;
  width: 100%;
}

</style>
</head>
<body>

<div class="App">
  <div class="fieldcontainer">
    <input class="searchfield" type="text" placeholder="search" />
  </div>
</div>
</body>
</html>

1 Ответ

3 голосов
/ 20 апреля 2020

Использование focus-within (https://developer.mozilla.org/fr/docs/Web/CSS/: фокусировка внутри ) 

* {
  box-sizing: border-box;
}

.App {
  height: 200px;
  background-color: tan;
}

.fieldcontainer {
  display: flex;
  padding-left: 8px;
  background-color: #CCCCCC;
  border-color: grey;
  width: 300px;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  cursor: default;
  transition: 0.4s;
}

.fieldcontainer:hover {
  background-color: #C3C3C3;
}

.searchfield {
  background-color: inherit;
  font-size: 1em;
  border: 0;
  flex-grow: 8;
  transition: all 0.4s linear;
  outline:none;
}

.fieldcontainer:focus-within {
  width: 100%;
}
<div class="App">
  <div class="fieldcontainer">
    <input class="searchfield" type="text" placeholder="search" />
  </div>
</div>
...