0

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

enter image description here

<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>
0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.