Magento 2 – Remove Disable Button Opacity from Search Form

javascriptmagento-2.1magento2PHPsearch

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> 

Best Answer

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