Appearance

Style syntax for 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 in different states using selectors, media queries, etc.

<div class="appearance:none:hover appearance:none@sm appearance:none@dark appearance:none@print">…</div>