Definition
The appearance property is used to display an element using a platform-native styling based on the user’s operating system’s theme. This means it can make an element look like a standard button, checkbox, radio button, or text input field, even if it isn’t one.
The property is especially useful for creating consistent styling across different browsers and platforms, where native UI elements may differ.
Here’s an example of how you might use the appearance property:
button.custom {
appearance: none;
background-color: #008cba;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
In this example, we use appearance: none; to remove the browser’s default button styling. This allows us to apply our own custom styles to the button, including setting the background color, text color, padding, and more.
The appearance property has good browser support. It falls off at Internet Explorer, 11. IE11 is EOL anyway! You can check out the browser support here.
In a nutshell, the appearance property offers an extra level of control over how certain UI elements are displayed. By understanding and appropriately using this property, front-end developers can create more consistent and appealing user interfaces.