AAtomic CSS

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

ClassCSSDescription
appnappearance: noneRemove browser default form styles

Class Details

appnappearance: 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" />

Primary Targets

Typical form elements where appn takes effect.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">elementRemoved stylesRequired additional classes
selectDropdown arrow, native borderbn p12px br8px
input[type=checkbox]Checkbox appearancew2rem h2rem br4px
input[type=radio]Radio button circlew2rem h2rem br50p
input[type=range]Slider track/handlew100p h8px br4px
buttonButton default stylesbn 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-selectcursoroverflow