Change minisearch bar input width on hover

Question

I am trying to change the search bar input width when it expands on hover.

<div class="search-wrapper">
<div class="search-content block block-search" id="search-content">
    <a class="search-icon" title="<?php /* @escapeNotVerified */ echo __('Search'); ?>" href="javascript:void(0);"><span><?php /* @escapeNotVerified */ echo __('Search'); ?></span></a>        
    
    <div class="search-form-container" <?php /*data-mage-init='{"dropdownDialog":{
        "appendTo":"#search-content",
        "triggerEvent":"hover",
        "triggerTarget":".search-icon",
        "closeOnMouseLeave": true,
        "triggerClass":"active",
        "parentClass":"active",
        "buttons":null}}'*/ ?> >
        <form class="form minisearch" id="search_mini_form" action="<?php /* @escapeNotVerified */ echo $helper->getResultUrl() ?>" method="get">
            <div class="field search">
                <label class="label" for="search" data-role="minisearch-label">
                    <span><?php /* @escapeNotVerified */ echo __('Search'); ?></span>
                </label>
                <div class="control">
                    <input id="search"
                       data-mage-init='{"quickSearch":{
                            "formSelector":"#search_mini_form",
                            "url":"<?php /* @escapeNotVerified */ echo $block->getUrl('search/ajax/suggest', ['_secure' => $block->getRequest()->isSecure()]); ?>",
                            "destinationSelector":"#search_autocomplete"}
                       }'
                       type="text"
                       name="<?php /* @escapeNotVerified */ echo $helper->getQueryParamName() ?>"
                       value="<?php /* @escapeNotVerified */ echo $helper->getEscapedQueryText() ?>"
                       placeholder="<?php /* @escapeNotVerified */ echo __('Search entire store here...'); ?>"
                       class="input-text"
                       onfocus="this.placeholder = ''" 
                       onblur="this.placeholder = '<?php /* @escapeNotVerified */ echo __('Search entire store here...'); ?>'"
                       maxlength="<?php /* @escapeNotVerified */ echo $helper->getMaxQueryLength();?>"
                       role="combobox"
                       aria-haspopup="false"
                       aria-autocomplete="both"
                       autocomplete="off"
                       aria-expanded="false"/>
                    <div id="search_autocomplete" class="search-autocomplete"></div>
                    <?php echo $block->getChildHtml() ?>
                </div>
            </div>
            <div class="actions">
                <button type="submit"
                title="<?php echo $block->escapeHtml(__('Search')) ?>"
                class="action search primary">
                    <span><?php /* @escapeNotVerified */ echo __('Search'); ?></span>
                </button>
            </div>
        </form>
    </div>
    
</div>

Answer 1

You can try to add below css

.header-top .header.content .block-search {
    width: auto;
    margin-top: 14px;
    position: relative;
}
.header-top .header.content .block-search input[type="text"] {
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.header-top .header.content .block-search:hover input[type="text"] {
    width: 250px;
}