CODEWITHSUNDEEP
javascripthtmlcssuser-interfacesass
KUNAL TIWARI
KUNAL TIWARI

Reputation: 52

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 ?

Upvotes: 0

Views: 39

Answers (1)

Peter B
Peter B

Reputation: 24280

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:

  • Do not assume there is a "search-cancel button" for all users to see.
  • Accept that styling it is limited, will be browser-dependent, and pointless for those that do not see it.

Upvotes: 1

Related Questions