Why -webkit-appearance: none is needed to style input[type=”search”]::-webkit-search-cancel-button

I have a CSS Element such as given below:

<input type="search" />

And styling above element with below CSS:

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    background: yellowgreen;
}

Why -webkit-appearance: none; is important to style the element like pseudo-classes I mentioned above?

What If I want to only change the color of cross icon ?