Расширение окна поиска до левой стороны - PullRequest
Новая
       33

Расширение окна поиска до левой стороны

0 голосов
/ 07 апреля 2020

Я пытался расширить это расширяемое окно поиска влево, но это не сработало. Не могли бы вы, ребята, помочь мне решить эту проблему? 

<div class="search-box d-flex justify-center align-center">
              <input type="text" placeholder="Type to search ..">
             <a class="p-20 cursor-pointer"><img class="search-btn max-h-20" src="./assets/logo/search.png" alt="search" /></a>
</div>

Вот CSS: 

.search-box:hover > input{
  display: inline-block;
  border-radius: 40px;
  border: 1px solid whitesmoke;
  padding: 0 10px;
  width: 170px;
  padding: 8px;
  outline: none;
  color: whitesmoke;
  box-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke;
}

.search-box:hover{
  transition: width 0.6s ease;
}

Спасибо!

1 Ответ

0 голосов
/ 07 апреля 2020

Я немного изменил ваш код, но, возможно, вы этого хотите (красное поле с высотой и шириной предназначено только для демонстрации, не стесняйтесь удалять эту часть;)): 

.search-box {
  display: flex;
  justify-content: flex-end;
  
  /* for demonstration */
  background-color: red;
  width: 250px;
  height: 150px;
  padding: 10px;
}

.search-box input {
  border-radius: 40px;
  border: 0;
  box-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke;
  padding: 0;
  width: 0;
  height: 15px;
  transition: padding 0.6s ease-in-out,
   width 0.6s ease-in-out;
}

.search-box:hover > input{
  display: inline-block;
  border-radius: 40px;
  width: 170px;
  outline: none;
  color: whitesmoke;
  padding: 8px;
  border: 1px solid whitesmoke;
}
<div class="search-box d-flex justify-center align-center">
              <input type="text" placeholder="Type to search ..">
             <a class="p-20 cursor-pointer"><img class="search-btn max-h-20" src="./assets/logo/search.png" alt="search" /></a>
</div>
...