I am creating a custom css style for Python Sphinx book theme according to their documentation. I am currently stuck designing the search box, which the book theme inherits from Pydata Sphinx theme. The html for the search field can be found in their repo.
I want to hide the icon element whenever someone starts typing in the search field, similar to this image. I found this plausible solution setting the display to none by using the subsequent-sibling operator in CSS (~). However, this operator only works when the icon is a subsequent sibling of the search form, and not the other way around, as far as I understand.
Because I cannot change the Pydata Sphinx theme source code I must find another solution through the injections possible via Sphinx customization. Do you know if this is possible, and if so, how?