CSS `appearance`

Control the native look of form elements and create fully custom UI components!

What is the `appearance` Property?

The CSS appearance property allows you to control whether and how an element uses the browser's native styling. By setting appearance: none;, you can remove the default look of form controls (like buttons, inputs, selects, checkboxes, and radios) and apply your own custom styles.

Remove Native Styles: Use appearance: none; to fully customize form controls.
Cross-Browser: Some browsers require vendor prefixes (e.g., -webkit-appearance).
Common Use Cases: Custom checkboxes, radio buttons, select dropdowns, and range sliders.

Syntax

selector {
  appearance: none;
  /* For better support: */
  -webkit-appearance: none;
  -moz-appearance: none;
}

💡 Tip: After removing native appearance, add your own styles for accessibility and usability!

Browser Support: appearance is supported in all modern browsers, but always check for vendor prefix requirements.

Interactive Examples

Custom Button

.custom-btn {
  appearance: none;
  -webkit-appearance: none;
  background: #4f8cff;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.custom-btn:hover {
  background: #2a4d8f;
}

Custom Checkbox

.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid #4f8cff;
  border-radius: 0.3rem;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.custom-checkbox:checked {
  background: #4f8cff;
  border-color: #2a4d8f;
}
.checkmark {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.custom-checkbox:checked + .checkmark::after {
  content: '';
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  background: #fff;
  border-radius: 0.15rem;
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
}

Custom Select

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  background: #f0f4fa;
  border: 2px solid #4f8cff;
  border-radius: 0.5rem;
  padding: 0.7rem 2.2rem 0.7rem 1rem;
  font-size: 1.1rem;
  color: #2a4d8f;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L8 8L14 2' stroke='%234f8cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2rem;
  cursor: pointer;
}

Try it: Interact with the button, checkbox, and select above. All use appearance: none for full customization!