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

1 Answer 1

4

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

2
  • 1
    is okay thanks, the only thing in your answer is that the .action div is .actions
    – Robert
    Oct 31, 2017 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. Oct 31, 2017 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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