I can’t find to edit the time to open the mini-search input field. All classes I added transition, does not have any effect. The default opening effect is so baaaam and I want to open it slow.
I also try to use in input id=”search”:
data-toggle="collapse"
but it show no changing.
<div class="block block-search">
<div class="block block-title"><strong><?= $escaper->escapeHtml(__('Search')) ?></strong></div>
<div class="block block-content">
<form class="form minisearch" id="search_mini_form"
action="<?= $escaper->escapeUrl($helper->getResultUrl()) ?>" method="get">
<?php if (!empty($queryParams = $additionalSearchFormData->getFormData())): ?>
<?php foreach ($queryParams as $param): ?>
<input type="hidden" name="<?= $escaper->escapeHtmlAttr($param['name']) ?>"
value="<?= $escaper->escapeHtmlAttr($param['value']) ?>"/>
<?php endforeach; ?>
<?php endif; ?>
<div class="field search">
<label class="label" for="search" data-role="minisearch-label">
<span><?= $escaper->escapeHtml(__('Search')) ?></span>
</label>
<div class="control">
<input id="search"
data-mage-init='{
"quickSearch": {
"formSelector": "#search_mini_form",
"url": "<?= /* @noEscape */ $quickSearchUrl ?>",
"destinationSelector": "#search_autocomplete",
"minSearchLength": "<?= $escaper->escapeHtml($helper->getMinQueryLength()) ?>"
}
}'
type="text"
name="<?= $escaper->escapeHtmlAttr($helper->getQueryParamName()) ?>"
value="<?= /* @noEscape */ $helper->getEscapedQueryText() ?>"
placeholder="<?= $escaper->escapeHtmlAttr(__('Search entire store here...')) ?>"
class="input-text"
maxlength="<?= $escaper->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
role="combobox"
aria-haspopup="false"
aria-autocomplete="both"
autocomplete="off"
aria-expanded="false"/>
<div id="search_autocomplete" class="search-autocomplete"></div>
<?= $block->getChildHtml() ?>
</div>
</div>
<div class="actions">
<button type="submit"
title="<?= $escaper->escapeHtml(__('Search')) ?>"
class="action search"
aria-label="Search"
>
<span><?= $escaper->escapeHtml(__('Search')) ?></span>
</button>
</div>
</form>
</div>
Do you have any ideas to get it? What can I do?
Many thanks, in advance.