Docsearch: Changing the background color of the search input box

My search input box is initially styled with one background color. However when docsearch attaches to it the background-color on the input has a style directly added to it that makes it transparent.

How can I override this? I don’t see this in the docs.
I’ve also downloaded docsearch and built a custom CSS from the git project. But I’m not having luck changing this. What is the right way to change this style?

Also, does the 3.0 docsearch version have more flexibility in customization? I am having trouble finding details on it.

Thanks!

Stu

Hi there!
You’ve probably already see this doc on changing the styling on docsearch since you mentioned building your own CSS (as mentioned in the Advanced styling section), but wanted to link it just in case.

If you’re generating your own custom CSS you should be able to change the input-background variable found in https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss#L9.

If that’s not working for you, could you please let us know, and let us know what else you’ve tried and the url of your docs?

Docsearch is currently on v 2.6.3, please feel free to take a look at the change log to see what’s been rolled out in each update. Let us know if you have a particular question about some functionality!

Thanks for the reply Maria!

Here’s a full walkthrough showing what I’m trying to do and what isn’t working as I expect: https://www.loom.com/share/3879dc585e104c70be2b54faf698bd8b

The source doc I show in the loom is attached. It shows the final style of the search box which I need to maintain even after docsearch initializes.

Any help would be greatly appreciated!

Best regards,

Stu

(Attachment layout_search_on_header.html is missing)

Hi Stuart,

I was not able to spot anything in the video that would cause the error. Would it be possible for you to share some code instead of the video? This will allow me to dig a bit deeper into why it doesn’t work. If you could create a CodeSandbox for example with the code affected (without any sensitive data ofcourse :slightly_smiling_face: ) and post it here, I can debug why it doesn’t work for you.

Cheers,

Devin.

Hi Devin, thanks for getting back to me.

Ok, here’s my first codesandbox: https://codesandbox.io/s/interesting-williamson-wb2ct

And here’s a walkthrough showing the issue reproduced in the sandbox

https://www.loom.com/share/1c1de6de3e1946a28006aed60b701335

Any suggestions?

Thanks!

Stu

Hi Devin,

Any suggestion here? In short, no changes that I make to the $searchbox-config seem to have any impact. Changes I make to $dropdown-config do.

Thanks,

Stu

Here’s a more detailed but still simple walkthrough showing the challenge I’m having styling the input. In short, I can change anything about the dropdown, it works as expected. But it doesn’t work for the input itself.

https://www.loom.com/share/c5ccf621a6c645d5b88c48ce88177c6f

FWIW I’m working with a hugo site using http://docsy.dev/

Thanks!

Stu