Syntax

Appearance

Controlling the native appearance of UI controls.

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

Class	Declarations
`appearance:value`	`appearance: value;`
`appearance:none`	`appearance: none;`
`appearance:auto`	`appearance: auto;`
`appearance:menulist-button`	`appearance: menulist-button;`
`appearance:textfield`	`appearance: textfield;`
`appearance:button`	`appearance: button;`
`appearance:searchfield`	`appearance: searchfield;`
`appearance:textarea`	`appearance: textarea;`
`appearance:push-button`	`appearance: push-button;`
`appearance:slider-horizontal`	`appearance: slider-horizontal;`
`appearance:checkbox`	`appearance: checkbox;`
`appearance:square-button`	`appearance: square-button;`
`appearance:menulist`	`appearance: menulist;`
`appearance:listbox`	`appearance: listbox;`
`appearance:meter`	`appearance: meter;`
`appearance:progress-bar`	`appearance: progress-bar;`

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>