CSS appearance Property

CSS appearance Property

The appearance property in CSS is used to control the native styling of form elements, such as buttons, checkboxes, and input fields. It allows you to either keep or remove the default browser styles.

1. Syntax

selector {
  appearance: value;
}

2. Accepted Values

Value	Description
auto (default)	Uses the browser’s default styling for the element.
none	Removes all default browser styles, allowing full customization.
textfield, button, etc.	Forces an element to look like a specific form control. (Browser support is limited.)

3. Example – Removing Default Browser Styles (appearance: none)

button {
  appearance: none;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

✅ The button loses its default style and can be fully customized.

4. Example – Customizing a Select Dropdown

select {
  appearance: none;
  background-color: white;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 16px;
}

✅ The dropdown loses its default styling, allowing for a custom design.

5. Best Practices

✔ Use appearance: none when designing custom buttons or form controls.
✔ Combine with border, background, and padding for a full custom look.
✔ Test across browsers, as some do not fully support appearance.