👓 CSS appearance property can be used to apply platform-specific styling to an element that doesn’t have it by default or to remove platform-specific styling from an element that does have it by default.
Use case
remove user agent's styles from an input of type search.
In webkit browsers, especially in Safari, there are limitations on overriding some styles, such as padding or font-family. Sometimes is litterally impossible to do it!
With the rule appearance: none; you can easily override them in a standard way.
input[type=search] {
appearance: none;
padding: 50px;
}
CSS Tricks: https://css-tricks.com/almanac/properties/a/appearance
🗄 Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
ℹ Browser support: https://caniuse.com/?search=appearance
Top comments (0)