Syntax

Appearance

Controlling the native appearance of UI controls.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
appearance:valueappearance: value;
appearance:noneappearance: none;
appearance:autoappearance: auto;
appearance:menulist-buttonappearance: menulist-button;
appearance:textfieldappearance: textfield;
appearance:buttonappearance: button;
appearance:searchfieldappearance: searchfield;
appearance:textareaappearance: textarea;
appearance:push-buttonappearance: push-button;
appearance:slider-horizontalappearance: slider-horizontal;
appearance:checkboxappearance: checkbox;
appearance:square-buttonappearance: square-button;
appearance:menulistappearance: menulist;
appearance:listboxappearance: listbox;
appearance:meterappearance: meter;
appearance:progress-barappearance: progress-bar;

Remove default styling

Use the appearance:none to remove default appearance of element. It is usually used to customize UI controls element.

<select class="appearance:none">
<option>Yes</option>
<option>No</option>
</select>

Before removing the default appearance, it looks like this:

<select>
<option>Yes</option>
<option>No</option>
</select>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="appearance:none:hover appearance:none@sm appearance:none@dark appearance:none@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.