How can I change the search bar text color to black?

Topic summary

Main issue: Change the search bar (and email field) input text from white to black so it’s visible on a white background.

Proposed fixes:

  • Add CSS in component-search.css targeting search inputs: .search__input.field__input { color: black !important; } and set label color (noting the selector should be .field__label).
  • Alternatively, add CSS in the theme’s main stylesheet (base.css or theme.scss.css depending on the theme): input#Search-In-Modal { color: black; }. One reply also included changing an icon color (svg.icon.icon-cart-empty { color: black; }).

Theme file location differences:

  • Some stores won’t have base.css; users were advised to use theme.scss.css instead. There’s ongoing confusion about which file to edit, depending on the theme.

Current status:

  • No confirmed resolution from the original poster. Another user asked how it was changed, and a final note reiterated it can be done via CSS without detailed steps.

Notes:

  • Screenshots were shared to show the result. Key unanswered items include confirming the correct selectors for the email field and which exact stylesheet to edit for each theme.
Summarized with AI on December 28. AI used: gpt-5.

Hi @TrulyTeas

You have theme.scss.css, what you want to change? The icon or the text in the search?