The following should help you:

.search-container:hover .search-field {
  width: 150px !important;
  transition-delay: 0s;
}

.search-container:hover {
  box-shadow: inset 0px -2px 0px 0px #FBB317;
}

.search-field {
  width: 0;
  transition: 1s ease;
  transition-delay: 3s;
}

<form role="search" method="get" class="search-form" action="http://localhost/.../">
  <div class="search-container">
    <label>
      <span class="screen-reader-text">Search for:</span>
      <input type="search" class="search-field" placeholder="" value="" name="s" role="search" tabindex="-1">
    </label>
    <button class="search-button" value="Search">Search</button>
  </div>
</form>

I have a search bar. After hovering on it the input field is shown. But as soon as it is “unhovered” from it, it of course disappears. Here is the simple HTML:

    <form role="search" method="get" class="search-form" action="http://localhost/.../">
    <div class="search-container">
        <label>
            <span class="screen-reader-text">Search for:</span>
            <input type="search" class="search-field" placeholder="" value="" name="s" role="search" tabindex="-1">
        </label>
        <button class="search-button" value="Search"><i class="astra-search-icon"></i></button>
    </div>
    </form>

    

And here is the CSS:

.search-container:hover .search-field {
    width: 150px !important;
}

.search-container:hover {
    -webkit-box-shadow:inset 0px -2px 0px 0px #FBB317;
    -moz-box-shadow:inset 0px -2px 0px 0px #FBB317;
    box-shadow:inset 0px -2px 0px 0px #FBB317;
}

Is there and way how to delay animation when the mouse is not anymore on the search-container div? So that users have some time to input search data. I have seen some similar questions and answers with transition-delay, but I was not able to achieve the solution.

Thank you.