[ @sdxc/u/layout ]

appearance

Applies appearance to clear a form control's native platform chrome, which Safari and Firefox honor only with their own prefixed property alongside the standard one, so all three are emitted; options narrows that set.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { appearance } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.appearance()`	`css({ appearance: "none", WebkitAppearance: "none", MozAppearance: "none" })`
`u.appearance("auto")`	`css({ appearance: "auto", WebkitAppearance: "auto", MozAppearance: "auto" })`
`u.appearance("none", { moz: false }) // Chromium/Safari-only vendor reset`	`css({ appearance: "none", WebkitAppearance: "none" })`

Examples

Basic example

Clear a checkbox's native look with appearance() and draw your own, then paint the checked state. Click the boxes to toggle them:

Email me about repliesEmail me about mentions

<div mix={[...]}>
	<label mix={[hstack({ gap: 2, align: "center" }), text("sm")]}>
		<input
			type="checkbox"
			checked
			mix={[
				appearance(),
				is(5),
				bs(5),
				m(0),
				rounded("sm"),
				border({ color: "brand.strong", width: 2, style: "solid" }),
				checked(bg("brand.solid")),
			]}
		/>
		Email me about replies
	</label>
	<label mix={[hstack({ gap: 2, align: "center" }), text("sm")]}>
		<input
			type="checkbox"
			mix={[
				appearance(),
				is(5),
				bs(5),
				m(0),
				rounded("sm"),
				border({ color: "brand.strong", width: 2, style: "solid" }),
				checked(bg("brand.solid")),
			]}
		/>
		Email me about mentions
	</label>
</div>

Restoring native styling

Use appearance("auto") to give a control back the platform's own look after appearance("none") cleared it:

<div mix={[...]}>
	<button mix={[appearance("none")]}>appearance("none")</button>
	<button mix={[appearance("auto")]}>appearance("auto")</button>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.appearance())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.appearance())

Signature

u.appearance(value?: AppearanceValue | (string & {}), options?: AppearanceOptions)