appearance

Removes browser default styles from form elements. appn is the starting point for custom form design, essential for customizing select, checkbox, radio, etc.

Class List

Class	CSS	Description
`appn`	appearance: none	Remove browser default form styles
`appa`	appearance: auto	Use browser default form styles (default)

Class Details

`appn`appearance: none

Removes all native styles (shadows, borders, backgrounds, arrows, etc.) from form elements. Freely apply designs with Atomic CSS classes afterwards.

<!-- Default: remove appearance then apply custom styles -->
<select class="appn bn b1pxsolid27272A bg18181B cFAFAFA py12px px16px br8px w100p fs14px cp focus-bc6366F1">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

<!-- checkbox -->
<input type="checkbox" class="appn w2rem h2rem br4px b1pxsolid27272A bg18181B cp checked-bg6366F1" />

<!-- radio -->
<input type="radio" class="appn w2rem h2rem br50p b1pxsolid27272A bg18181B cp checked-bg6366F1" />

`appa`appearance: auto

Keeps the native form styling provided by the browser and operating system. It is already the default for most form elements, so in practice it is used to undo a reset applied higher up, or to restore the native look only under certain conditions.

<!-- Restore the native control on a specific element -->
<select class="appa">
  <option>Native select</option>
</select>

<!-- Reset only on small screens, keep the custom look on desktop -->
<input type="checkbox" class="appn sm-appa w2rem h2rem br4px b1pxsolid27272A" />

<!-- Opt a single field out of a reset applied to a whole form -->
<form class="df fdc gap12px">
  <input type="date" class="appa b1pxsolid27272A br8px p12px" />
</form>

For example, after applying appn to an entire form, you can bring back a single input such as a date picker with appa, where the native UI is more convenient. Combined with responsive prefixes it can also enable native controls on small screens only.

Primary Targets

Typical form elements where appn takes effect.

element	Removed styles	Required additional classes
select	Dropdown arrow, native border	`bn p12px br8px`
input[type=checkbox]	Checkbox appearance	`w2rem h2rem br4px`
input[type=radio]	Radio button circle	`w2rem h2rem br50p`
input[type=range]	Slider track/handle	`w100p h8px br4px`
button	Button default styles	`bn p12px br8px cp`

Practical Examples

Custom Select

<!-- Custom select dropdown -->
<div class="pr">
  <select class="appn bn b1pxsolid27272A bg18181B cFAFAFA py12px pl16px pr4rem br8px w100p fs14px cp focus-bc6366F1 tall200msease">
    <option>Select framework</option>
    <option>Vue</option>
    <option>React</option>
    <option>Svelte</option>
  </select>
</div>

Custom Checkbox

<!-- Custom Checkbox -->
<label class="df aic gap8px cp">
  <input type="checkbox" class="appn w2rem h2rem br4px b2pxsolid27272A bg18181B cp checked-bg6366F1 checked-bc6366F1 tall200msease" />
  <span class="fs14px cFAFAFA">I agree to the terms of service</span>
</label>

Custom Range Input

<!-- Custom Range Slider -->
<input type="range" class="appn w100p h8px br4px bg27272A cp" min="0" max="100" value="50" />

Tips & Notes

Always provide replacement styles

appn alone renders the element unstyled. Always add Atomic classes for border, padding, background, etc.

Select arrow

appn removes the select dropdown arrow. Add a custom arrow via background image or pseudo-element.

Maintain accessibility

Even after removing default styles, maintain keyboard accessibility and focus indicators. Always add focus styles with focus- pseudo-class.

user-select cursor overflow