-webkit-search-cancel-button not working on Query Suggestions implementation

Open Q&A
#1

Hi all,

Trying to change the appearance of the webkit-search-cancel-button on an input that’s part of a query suggestions implementation (React Instantsearch). Here is the CSS code:
image

This works on another component’s input box so just wondering what the deal is here. And what’s weird is that the normal cancel button doesn’t show either.

Thanks,
Brent

#2

Do you have this in a sandbox? Our default css removes the browser’s cancel button already, as you can see here:


.ais-SearchBox-input::-ms-clear, .ais-SearchBox-input::-ms-reveal {
    display: none;
    width: 0;
    height:0
}

.ais-SearchBox-input::-webkit-search-cancel-button, .ais-SearchBox-input::-webkit-search-decoration, .ais-SearchBox-input::-webkit-search-results-button, .ais-SearchBox-input::-webkit-search-results-decoration {
    display:none
}