# 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.

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

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.

## 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:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.appearance())
```

## Responsive design

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

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

## Signature

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