CSS appearance Property

Description

The CSS appearance property is a powerful but often underutilized tool that allows developers to control the native styling of user interface elements. Unlike properties such as background or border, which define the visual appearance of an element in a declarative way, appearance specifically targets how an element should be rendered in relation to the operating system or browser’s default styles. This can be particularly useful when you want a consistent look across different platforms or when you need to override the default “chrome” of form elements like buttons, checkboxes, and select menus. By modifying the appearance, developers can create interfaces that either embrace the native look or fully customize it to match a particular design aesthetic.

One of the key benefits of using appearance is that it allows for a high degree of control over interactive elements without requiring complex workarounds or heavy use of JavaScript. For example, form elements such as radio buttons or range sliders often come with platform-specific styling that can vary widely between browsers and devices. By setting appearance: none;, a developer can remove these default styles, allowing for a completely custom design using other CSS properties like border-radius, box-shadow, or background. This approach not only improves visual consistency but also opens up creative possibilities for interactive components, animations, and transitions that would otherwise be limited by the browser’s built-in styling.

However, while appearance offers powerful control, it should be used thoughtfully. Overriding native appearances can affect usability, accessibility, and the user’s familiarity with standard controls. For instance, a fully customized button or checkbox may look attractive but could confuse users if it no longer behaves in expected ways. As such, designers often balance the use of appearance with considerations of visual clarity, touch target size, and feedback cues. When combined judiciously with other styling techniques and properties like padding or transition, the appearance property becomes a valuable tool for achieving both aesthetic precision and functional interface design.

Definition

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.appearance

Interactive Demo

appearance: none;

appearance: auto;

Syntax

appearance: none | auto | <compat-special> | <compat-auto>

Values

noneHides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.
autoActs as none on elements with no special styling.
<compat-special>One of menulist-button or textfield. Both of these values are equivalent to auto on elements with no special styling.
<compat-auto>Possible values are button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, and textarea. Keywords which are the equivalent of auto for maintaining compatibility with older browsers.

Example

HTML

<div class='example'>

    <h2>CSS appearance property  -  examples</h2>



    <div class='controls'>

        <div class='row'>

            <button class='btn default'>Default button</button>

            <button class='btn no-appearance'>Appearance: none</button>

        </div>



        <div class='row'>

            <label>

                Search (default)

                <input type='search' placeholder='Default search' class='input default'>

            </label>



            <label>

                Search (appearance: none)

                <input type='search' placeholder='Custom search' class='input no-appearance'>

            </label>

        </div>



        <div class='row'>

            <label>

                Select (default)

                <select class='select default'>

                    <option>Option 1</option>

                    <option>Option 2</option>

                </select>

            </label>



            <label class='select-label'>

                Select (appearance: none + custom arrow)

                <select class='select no-appearance'>

                    <option>Option A</option>

                    <option>Option B</option>

                </select>

            </label>

        </div>

    </div>

</div>

CSS

/* Basic page styles */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #f7fafc;
    color: #0f172a;
    padding: 24px;
}

.example {
    max-width: 760px;
    margin: 0 auto;
}

h2 {
    margin: 0 0 16px 0;
    font-size: 18px;
}

.controls {
    display: grid;
    gap: 16px;
}

.row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Shared control styles */
.btn,
.input,
.select {
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    color: #0f172a;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.btn:hover,
.input:focus,
.select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.12);
}

/* Default native appearance  -  no special rules */
.default {
    /* nothing here on purpose  -  shows the browser's native appearance */
}

/* Remove native appearance (cross-browser) and apply custom styling */
.no-appearance {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom visual style to replace the native chrome */
    background: linear-gradient(#ffffff, #f8fafc);
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
}

/* Make the "appearance: none" button look distinct */
.btn.no-appearance {
    background: linear-gradient(#06b6d4, #0ea5a3);
    color: white;
    border: none;
    box-shadow: 0 6px 18px rgba(6,182,212,0.12);
}

/* Custom select: remove native arrow and add our own with a pseudo-element on the label */
.select-label {
    position: relative;
    display: inline-block;
}

.select-label .select.no-appearance {
    /* leave room for our custom arrow */
    padding-right: 34px;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
}

.select-label::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #334155; /* custom arrow triangle */
}

/* Small responsive tweaks */
@media (max-width: 520px) {
    .row { flex-direction: column; align-items: stretch; }
    .btn, .input, .select { width: 100%; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS appearance property. Hover over a browser icon to see the version that first introduced support for this CSS property.