2

I've create a new theme based on Blank theme. The search button is transparent when there is no text in the input.

How can I remove that transparency?

        <div class="control">
            <input id="search"
                   data-mage-init='{"quickSearch":{
                        "formSelector":"#search_mini_form",
                        "url":"<?= /* @escapeNotVerified */ $block->getUrl('search/ajax/suggest', ['_secure' => $block->getRequest()->isSecure()]) ?>",
                        "destinationSelector":"#search_autocomplete"}
                   }'
                   type="text"
                   name="<?= /* @escapeNotVerified */ $helper->getQueryParamName() ?>"
                   value="<?= /* @escapeNotVerified */ $helper->getEscapedQueryText() ?>"
                   placeholder="<?= /* @escapeNotVerified */ __('Search entire store here...') ?>"
                   class="input-text"
                   maxlength="<?= /* @escapeNotVerified */ $helper->getMaxQueryLength() ?>"
                   role="combobox"
                   aria-haspopup="false"
                   aria-autocomplete="both"
                   autocomplete="off"/>
            <div id="search_autocomplete" class="search-autocomplete"></div>
            <?= $block->getChildHtml() ?>
        </div>
    </div>
    <div class="actions">
        <button type="submit"
                title="<?= $block->escapeHtml(__('Search')) ?>"
                class="action search">
            <span><?= /* @escapeNotVerified */ __('GO') ?></span>
        </button>
    </div>

In frontend on the search button I have this disabled=""; Maybe this is the problem?

<div class="actions">
<button class="action search" type="submit" title="Search" disabled="">
<span>GO</span>
</button>
</div> 
3

This is a simple CSS change you need to do, add below CSS in your custom or extended CSS file.

By default opacity for disabled state is 0.5 , you need to change it to "1"

.block-search .actions.search[disabled]{
   opacity: 1;
}

You can check here detailed answer of how to add custom CSS / LESS in Magento Way

Note: Above changes tested on LUMA THEME

|improve this answer|||||
  • 1
    is okay thanks, the only thing in your answer is that the .action div is .actions – Robert Oct 31 '17 at 7:28
  • I updated your suggestion @Robert , Cheers ! , however ".action " class is used in button and ".actions" in parent div in which button is placed . Any way this helped you so that's good. – Manoj Deswal Oct 31 '17 at 7:31

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.