Appearance

Appearance

Style syntax for controlling the native appearance of UI controls.

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

Overview [sr-only]

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

<div class="appearance:none:hover appearance:none@sm appearance:none@dark appearance:none@print"></div>
PREVIOUS
Accent Color

Style syntax for setting the accent color of user interface elements or controls.

NEXT
Caret Color

Style syntax for setting the color of the cursor in text input.

MIT License © Aoyue Design LLC.