Interactivity

appearance

Controlling the native appearance of UI controls.

Overview

ClassDeclarations
appearance:noneappearance: none;
appearance:autoappearance: auto;
appearance:menulist-buttonappearance: menulist-button;
appearance:textfieldappearance: textfield;
appearance:buttonappearance: button;
appearance:searchfieldappearance: searchfield;
appearance:textareaappearance: textarea;
appearance:checkboxappearance: checkbox;
appearance:menulistappearance: menulist;
appearance:listboxappearance: listbox;
appearance:meterappearance: meter;
appearance:progress-barappearance: progress-bar;
appearance:<value>appearance: <value>;

appearance controls native widget rendering. It does not replace the element’s value, keyboard behavior or accessible name.

Examples

Remove default styling

Use appearance:none to replace a select’s platform treatment. This example supplies an explicit border, background and decorative chevron while keeping the native select.

Remove default styling
The full authored select and its options remain native. Change its value with the platform picker or keyboard; appearance changes paint without replacing the accessible label.
<!-- Custom appearance --><label class="grid gap-sm w:240px max-w:100%">  Sort assets  <span class="rel block">    <select id="target"    class="w:100% pr-xl b:1px|solid|var(--color-line-base) r-sm           bg-surface-base appearance:none">      <option value="newest">Newest first</option>      <option value="oldest">Oldest first</option>      <option value="name">Name</option>    </select>    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16"      fill="none" stroke="currentColor" stroke-width="1.5"      class="abs right-sm top:50%             transform:translateY(-50%) untouchable">      <path d="m4 6 4 4 4-4" />    </svg>  </span></label>
<!-- Native comparison --><label class="grid gap-sm w:240px max-w:100%">  Sort assets  <span class="rel block">    <select id="target" class="w:100% appearance:auto">      <option value="newest">Newest first</option>      <option value="oldest">Oldest first</option>      <option value="name">Name</option>    </select>  </span></label>
Generated CSS
@layer utilities {  .appearance\:none {    appearance: none  }}

The custom chevron ignores pointer events so the select receives clicks. The browser still owns the popup; its appearance and opening keys depend on the platform.

Restore native appearance

Switch the same select from appearance:none to appearance:auto at sm. This comparison omits a custom chevron so only the native indicator returns.

Restore native appearance
appearance: Restore native appearance controls
The full authored select and its options remain native. Change its value with the platform picker or keyboard; appearance changes paint without replacing the accessible label.
<!-- Resize to restore native paint --><label class="grid gap-sm w:240px max-w:100%">  Sort assets  <span class="rel block">    <select id="target"    class="w:100% appearance:none appearance:auto@print           appearance:auto@screen@sm">      <option value="newest">Newest first</option>      <option value="oldest">Oldest first</option>      <option value="name">Name</option>    </select>  </span></label>

Restoring appearance:auto does not remove authored borders, spacing or colors. Clear those separately when a complete return to platform defaults is required.

Keep semantics intact

Keep a visible label and real options. Use the keyboard or native picker to change the value; styling alone does not create form semantics.

Keep semantics intact
The full authored select and its options remain native. Change its value with the platform picker or keyboard; appearance changes paint without replacing the accessible label.
<!-- Labeled native select --><label class="grid gap-sm w:240px max-w:100%">  Sort assets  <span class="rel block">    <select id="target"    class="w:100% pr-xl b:1px|solid|var(--color-line-base) r-sm           bg-surface-base appearance:none">      <option value="newest">Newest first</option>      <option value="oldest">Oldest first</option>      <option value="name">Name</option>    </select>    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16"      fill="none" stroke="currentColor" stroke-width="1.5"      class="abs right-sm top:50%             transform:translateY(-50%) untouchable">      <path d="m4 6 4 4 4-4" />    </svg>  </span></label>

The label wraps the select, so its accessible name remains “Sort assets.” A decorative SVG has no separate name or focus stop.

Apply conditionally

Remove native appearance only on focused selects with appearance:none:focus. Move focus to the adjacent checkbox to restore the platform paint.

Apply conditionally
The full authored select and its options remain native. Change its value with the platform picker or keyboard; appearance changes paint without replacing the accessible label.
<!-- Focus changes appearance --><label class="grid gap-sm w:240px max-w:100%">  Sort assets  <span class="rel block">    <select id="target"      class="w:100% appearance:auto appearance:none:focus">      <option value="newest">Newest first</option>      <option value="oldest">Oldest first</option>      <option value="name">Name</option>    </select>  </span></label><label class="flex items-center gap-sm mt-md">  <input type="checkbox"> Include archived assets</label>

The control remains a select throughout the focus change. Its focus outline stays visible independently of native appearance.

Motion
transition-timing-function

Controlling how a transition progresses through time.

Interactivity
cursor

Setting the mouse cursor style.

© 2026 Aoyue Design LLC.MIT License
Trademark Policy