Search class keeps changing

Ask the Community Customization
1

Within Squarespace we are targetting the search icon class to transform the colour. The class keeps changing and needs updating. Would it be better practice to put some code inside of Elfsight instead? If so, what needs to be done differently to the code below?

//search icon
.cBgUUZ {
  background: transparent !important;
  margin-left: 0.75vw;
  width: 22px !important;
  height: 22px !important;
  svg {
    fill: #fff !important;
    width: 22px !important;
    height: 22px !important;
  }
}
@media (max-width: 800px) {
  .Popup__Container-sc-cbihxe-0 {
    right: auto !important;
    left: 20px !important;
  }
}
1 Like
3

Hi there @Dave_Hawkins :wave:

Could you please send me a link to the page where your widget is installed? I’ll gladly check things for you :slightly_smiling_face:

4

Thanks so much, here’s the link to the site.

1 Like
5

This code will help you change the search icon color:


[class*="Button__Container-sc"] svg {
  fill: rgb(255, 0, 0);
}

.global-styles, [class*="SearchBar__Button-sc"] svg {
  fill: rgb(255, 0, 0);
}

Just add it to the Custom CSS field on the Settings tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

6

Max - it’s almost worked, but it’s not removed the background.

Even adding the following to make it white and try to remove the background hasn’t worked - i’d value your input if possible.

[class*="Button__Container-sc"] svg {
  fill: rgb(255, 255, 255);
  background: transparent;
}

.global-styles, [class*="SearchBar__Button-sc"] svg {
  fill: rgb(255, 255, 255);
  background: transparent;
}
1 Like
7

Okay! I’ll check it with the devs and will get back to you a bit later :slightly_smiling_face:

8

This code should do the trick:

[class*="Button__Container-sc"] {
    background-color: rgba(255, 255, 255, 0);
}

[class*="Button__Container-sc"]:hover {
    background-color: rgba(255, 255, 255, 0);
}