Recent searches


No recent searches

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

Answered


Posted Apr 14, 2021

Hi, I would like to know if anyone knows how to specifically change or style the "X" icon that clears the Search Input Field in Guide on the homepage of our Zendesk Guide.

 


0

17

17 comments

image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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;
}

Let me know if it solves your issue 

Thanks 

Pulkit

2


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

1


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hey Gaby,

Happy to hear :) 

0


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!

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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

0


@...

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

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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

0


@...

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

Ashley

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Ashley Yau

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

Thanks

Pulkit

0


Hi @...

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

 

Ashley

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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

0


@...

 

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

 

Ashley

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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

0


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

0


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.

0


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?

0


image avatar

Hiedi Kysther

Zendesk Customer Care

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! 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post