appearance-none strips native control styling for custom designs. This family contains 2 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
appearance-noneappearance: none;
appearance-autoappearance: auto;

Example#

example
html
<select class="appearance-none border rounded-lg px-3 py-2 pr-8">…</select>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Pair appearance-none with your own chevron icon

utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap