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

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

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
}