0

Attempting to change the placeholder text color found in the search input box of Magento 2. The solution listed below worked properly for Magento 1, however I havent found any documentation on how Magento 2 handles this.

#search::-webkit-input-placeholder { color: #0000ff; }
#search::-moz-placeholder { color: #0000ff; }
#search:-ms-input-placeholder { color: #0000ff; }

3 Answers 3

1

As this is a CSS change it doesn't matter if you're on Magento 1, Magento 2, or Magento 46 it should still work. I've just tested it on the Luma theme and the same code works.

#search::-webkit-input-placeholder {
    color: red;
}

Obviously you'll need to add prefixes for the other browsers to.

1

AT magento2, Search Box coming from Magento_Search module.

If want to search box placeholder text then goto

app/design/frontend/[VendorTheme]/[ThemeName]/Magento_Search/templates/form.mini.phtml

and placeholder attribute you can it text.

If form.mini.phtml does exit at your theme location then just copy from vendor/magento/module-search/view/frontend/templates and paste at app/design/frontend/[VendorTheme]/[ThemeName]/Magento_Search/templates

2
  • This allows the change of the text itself, what about the color? Altering the color on the class input-text does not change the color of the placerholder text. Jun 9, 2016 at 20:03
  • In case anyone is trying this with the ElasticSuite module installed on the store, you must override their file instead. This file is located at /vendor/smile/elasticsuite/src/module-elasticsuite-core/view/frontend/templates/search/form.mini.phtml and must be copied to app/design/frontend/Gamma/DoubleR/Smile_ElasticsuiteCore/templates/search/form.mini.phtml. Dec 5, 2019 at 19:27
0

In the Magento 2 less documentation there is a file named css/docs/variables.html which specifies the placeholder variables:

Placeholder

@form-element-input-placeholder__color: #c2c2c2; //Form control placeholder color

Your Answer

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

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