Search code examples
cssalgolia

Changing the background color in a search bar

I'm about to start using Algolia Instant Search on my website, but I can't figure out what CSS elements to set in order to change the background color the way I would with text. I know it's possible because other websites have dark search bars and use them, but putting background-color="black" in the DIV doesn't work.

Their documentation doesn't say anything about colors for the search bar, and googling it hasn't come up with anything either. https://www.algolia.com/doc/api-reference/widgets/search-box/js/

Any help is appreciated!

Solution

  • You can do something like this:

    instantsearch.widgets.searchBox({
  // ...
  cssClasses: {
    input: 'bg-black',
  },
});

    And then in your CSS file:

    .bg-black {
  background-color: black;
}

    You're essentially asking InstantSearch to add an additional class called bg-black to the HTML input element it renders. Then in your CSS, you're targeting that CSS selector and adding styles to it.

    More docs here: https://www.algolia.com/doc/api-reference/widgets/search-box/js/#widget-param-cssclasses