How to change the "cancel(erase)" X icon in the Guide Search input field

Hey Gaby

You can place the below CSS at the bottom of your style.css file

Note: You have to upload the image which you want to use in the place of the default image on the assets folder, then add that URL in the place of content: URL()

input::-webkit-search-cancel-button {
 -webkit-appearance: none;
 content: URL();
 cursor: pointer;
}

@... Amazing! That worked! Thank you so much.

Hey Gaby,

Happy to hear :) 

Hi @...

May I know if I would like to change the color of the "X" icon and search result hyperlink color, how can I do so? Thanks!

Hi Ashley Yau

The image you're using for the X icon is it PNG or SVG?

Are you open to use the Font Awesome icons? 

Thanks 

Pulkit

@...

Any chance I can keep the default X icon but just to change the color? thanks!

Hi Ashley Yau

Yes, it's possible you need to update the color of your X icon image either using an Online tool or Photoshop, then upload the updated image in the place of the previous one

Thank You 

Pulkit

@...

Thanks so much! Any chance you may know how to change the color of search result hyperlinks as well? Thanks.

Ashley

Hi Ashley Yau

Can you please share a screenshot for the same, so I will get an idea where you are pointing 

Thanks

Pulkit

Hi @...

Please find the below, I would like to change the color of article links, thanks!

Ashley

Hi Ashley Yau

Thanks, for providing the screenshot :)

Please, add the following CSS code at the bottom of your style.css file 

zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
  color: black;
}

You can update the color of your choice

Let me know if it solves your issue 

Thank you 

Pulkit

@...

Thanks for the advise! May I know if possible to replace "black" with color code? thanks.

Ashley

Hi Ashley Yau

Yes, you can add the HASH value of the color of your choice, like below I have added the HASH value of black color

zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
  color: #000000;
}

Let me know if it solves your issue

Thanks 

Pulkit

@... it looks perfect! Thanks so much!

You can use the Lightroom to update the color of your x icon image and then you can update it in system. First update the icon image in Lightroom and then replace the previous image with this new one.

Hey Pulkit Pandey have you an idea how to replace the X icon with another icon from a library imported in the node_modules? , I think it can't be done with CSS with content URL(), what do you think?

Hi Ghouaiel, 

It's difficult to tell without knowing which Templating API version you are using. For context, our search bar is rendered with a {{search}} curlybars helper that is responsible to render both markup (HTML), styles (CSS) and JS. In the latest versions of the templating API, that helper renders a SVG for the X icon. So the only way to change it is via DOM manipulation. However, we don't recommend heavily customizing the output of the helper because your internal implementation might change in the future.

If you'll need further assistance, I highly recommend reaching out to Support so we can further assist you. 

Thanks! And, have a great day!