Posted on

Change minisearch bar input width on hover

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>

Leave a Reply

Your email address will not be published. Required fields are marked *