Вложенные поля ввода и выбора с переходом на hover

Question

У меня есть поле выбора, которое находится непосредственно рядом с полем ввода (см. Соответствующий фрагмент ниже).

В настоящее время две отдельные анимации перехода воспроизводятся, чтобы отображать оба окна при наведении указателя мыши.

Я бы хотел использовать только один переход для отображения обоих полей при наведении. Есть ли более чистый способ сделать это? Могут ли разные свойства позиционирования помочь мне? Заранее спасибо!

html, body { 
 
    background-color: rgba(64, 124, 165, 1); 
 
} 
 

 
.quick-search-container { 
 
    cursor: pointer; 
 
    width: 350px; 
 
    vertical-align: top; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    top: -5px; 
 
    float: left; 
 
} 
 

 
.quick-search-container input#search { 
 
    width: 20px; 
 
    height: 30px; 
 
    background: rgba(64, 124, 165, 1); /*replacement*/ 
 
    border: none; 
 
    font-size: 10pt; 
 
    float: right; 
 
    color: #262626; 
 
    padding-right: 35px; 
 
    padding-left: 5px; 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    color: #000; 
 
    -webkit-transition: width .55s ease, background-color .55s ease; 
 
    -moz-transition: width .55s ease, background-color .55s ease; 
 
    -ms-transition: width .55s ease, background-color .55s ease; 
 
    -o-transition: width .55s ease, background-color .55s ease; 
 
    transition: width .55s ease, background-color .55s ease; 
 
} 
 

 
.quick-search-container input#search { 
 
    color: #65737e; 
 
    border: none; 
 
} 
 

 
.quick-search-container .icon { 
 
    position: absolute; 
 
    vertical-align: text-top; 
 
    right: 0; 
 
    margin-right: 10px; 
 
    margin-top: 6px; 
 
    color: #333; 
 
    font-size: 18px; 
 
} 
 

 
.quick-search-container .selector { 
 
    float: right; 
 
    vertical-align: text-top; 
 
    margin-right: 10px; 
 
    margin-top: 6px; 
 
    color: #ffffff; 
 
    font-size: 18px; 
 
} 
 

 
.quick-search-container input#search:focus, 
 
.quick-search-container input#search:active, 
 
select#selector:active { 
 
    outline: none; 
 
} 
 

 
.quick-search-container:hover input#search { 
 
    outline: none; 
 
    width: 180px; 
 
    background: #fff; 
 
} 
 

 
.quick-search-container:hover select#selector { 
 
    outline: none; 
 
    width: 100px; 
 
} 
 

 
.quick-search-container:hover .icon { 
 
    color: rgba(64, 124, 165, 1); /*replacement*/ 
 
} 
 

 
.quick-search-container .selector { 
 
    margin-right: 0px; 
 
    margin-top: 0px; 
 
    transition: width .22s ease, background-color .55s ease; 
 
} 
 

 
.quick-search-selector { 
 
    margin-right: 0px; 
 
    margin-top: 0px; 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border: none; 
 
    height: 30px; 
 
    width: 0px; 
 
    color: black; 
 
    transition: width .55s ease, background-color .55s ease; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
     <a class="quick-search-container"> 
 
      <span class="icon"> 
 
       <i (click)="initQuickSearch()" class="fa fa-search"></i> 
 
      </span> 
 
      <input type="search" id="search" placeholder="Search..."> 
 
      <span class="selector"> 
 
       <select class="quick-search-selector" id="selector"> 
 
       <option>VIN</option> 
 
       <option>Make</option> 
 
       <option>Model</option> 
 
       <option>Cow</option> 
 
       </select> 
 
      </span> 
 
      </a>

Answer 1

Просто оберните ввод и выбор коробки в контейнер и установить анимацию на нем, увидеть упрощенный демо с помощью Flexbox ниже. Вы можете отрегулировать стиль по мере необходимости.

jsFiddle

html { 
 
    background-color: rgba(64, 124, 165, 1); 
 
} 
 
.quick-search-container { 
 
    position: relative; 
 
    width: 250px; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    align-items: center; 
 
    border: 1px solid; 
 
} 
 
.input-select { 
 
    width: 0; 
 
    overflow: hidden; 
 
    transition: width 1s; 
 
    display: flex; 
 
} 
 
.quick-search-selector { 
 
    width: 30%; 
 
    height: 30px; 
 
} 
 
.quick-search-input { 
 
    width: 70%; 
 
    -webkit-appearance: none; 
 
    outline: 0; 
 
    height: 30px; 
 
} 
 
.quick-search-container:hover .input-select { 
 
    width: 100%; 
 
} 
 
.quick-search-button { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    font-size: 16px; 
 
    background: none; 
 
    border: 0; 
 
    outline: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<a class="quick-search-container"> 
 
    <span class="input-select"> 
 
    <select class="quick-search-selector" id="selector"> 
 
     <option>VIN</option> 
 
     <option>Make</option> 
 
     <option>Model</option> 
 
     <option>Cow</option> 
 
    </select> 
 
    <input type="search" class="quick-search-input" placeholder="Search..." id="search"> 
 
    </span> 
 
    <button class="quick-search-button"> 
 
    <i class="fa fa-search"></i> 
 
    </button> 
 
</a>