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 ?
Styling the search field cancel button is documented as
Non-standard: This feature is non-standard and is not on a standards track.
Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button
This styles a UI element that other browser engines (e.g. Firefox) simply do not display, which is why the styling option is only available with a browser prefix.
As for the -webkit-appearance part, this seems unrelated to the search button itself. If you want none, you can as well use display: none.
MDN has no documentation for -webkit-appearance, but it does for appearance. That means a prefix isn't needed. Then again, it warns that "this property ... was considered a misfeature and authors are encouraged to use only standard keywords now."
For the prefixed version I found a geeksforgeeks.org page which says:
The -webkit-appearance CSS property is used to control the default styling of HTML elements, overriding the browser’s default styles (such as buttons, input fields, or scrollbars). It is specific to WebKit-based browsers like Chrome and Safari, allowing elements to adopt or ignore native OS styling.
All in all: