How to change Homepage Search Widget (AI-Search) in CSS?

[stefan_kreil]

Hello community,

I would like to change the "Homepage search" widget. I have cloned the widget, examined the element in the browser and then edited the CSS. But it didn't work for me.

Does anyone have experience with editing this widget? For example, I would like to round the corners, etc...

I would like to shape the esc search bar a little bit modern.

Example:

Actually:

Thank you. Best regards!

[The Machine]

Sorry, I misread this.

You should be able to change the CSS or the page CSS and then add !important perhaps to force it.

[stefan_kreil]

Hi @The Machine 

I proceeded as follows:

1) Right click on copyed widget "z_Homepage_Search" and opened with "Instance in Page editor"

2) CSS field and added:

#homepage-search .input-container {
  border-radius: 20px !important;
}

Unfortunately it does not work.

I also added width and center. This is working!

#homepage-search {
  width: 550px; 
  margin: auto; 
  text-align: center;
}

[The Machine]

I was able to add this css to the widget instance and it worked for me.

#homepage-search input{
border-radius:24px !important
}

[stefan_kreil]

Hi @The Machine 

Did you add this in "Widget in Editor" or "Instance in Page Editor"?

I added the following CSS into Widget in Editor / Instance in Page Editor. It doesn't work for me.

.sp-tagline-color {
  color: $sp-tagline-color;
}

#homepage-search input{
border-radius:24px !important
}

#homepage-search {
  .aisearch {
    --classicsponlydonotuse--rem-multipy: 1.6;
  }
}

Have you switched on the AI Search?
Could it be that there is another CSS rule that is more specific or is loaded later in the CSS so that mine are overwritten?

.input-container should be the right class. I have inspected and changed the element in the browser.

Thank you. BR