Black Friday Super Sale 2024 is Coming Soon

WIN AN iPAD, LIFETIME MEMBERSHIP
×

Search Divi Plus Documentation

Search for answers or browse our knowledge base.

All Topics
Print

How to change color of clear search icon in DP Ajax Search?

This specific feature is controlled by the browser itself, and there isn’t a direct option within the plugin to modify it.

However, you can try the following CSS snippet to customize the appearance. Add the below CSS in Divi Theme Options (navigate to WP admin >> Divi >> Divi Theme Options >> Custom CSS)

Please be aware that the effectiveness of this solution may vary across different browsers

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
    background-color: #000 ;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

Remember to replace the color code with your preferred values in the above CSS.

Table of Contents