# appearance

> フォーム要素などのネイティブな見た目を制御するプロパティです。noneを指定することでブラウザ標準のスタイルを無効化し、カスタムスタイルを適用する際に使用します。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/appearance/

## 構文

```css
appearance: none | auto
```

## Tailwindでは

- `appearance-none` → appearance: none
- `appearance-auto` → appearance: auto

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 84+ / Firefox 80+ / Safari 15.4+ / Edge 84+

## コード例

### 例1: ネイティブスタイルを無効化（カスタムスタイル適用可能に）

```css
appearance: none;
```

### 例2: セレクトボックスの矢印を消す

```css
select { appearance: none; }
```

### 例3: チェックボックスのデフォルトスタイルを無効化

```css
input[type="checkbox"] { appearance: none; }
```

### 例4: ブラウザデフォルトの見た目

```css
appearance: auto;
```

## TIPS

カスタムデザインのフォーム部品を作る際の第一歩。appearance: none;後に独自のスタイルを適用する。

## よくある間違い

appearance: none;だけでは見た目が消えるだけ。独自のスタイルを必ず追加する必要がある。ベンダープレフィックス（-webkit-、-moz-）が必要な場合がある。

## AIがよく間違えるポイント

appearance: noneはOS由来の見た目を全て剥がすため、selectの矢印・checkboxの箱などが消えて「自分で全部作り直す」責任が発生します。色を変えたいだけならaccent-colorで済む——この段階の使い分けをAIは飛ばして、いきなり全自作の長いコードを出しがちです。剥がした後のフォーカス表示の再実装も忘れられがちです。

## AIへの依頼文例

- selectの見た目をカスタムしたい。appearance: noneで矢印が消える分の再実装とフォーカス対応込みで

## 関連プロパティ

- [border](https://www.css-dictionary.com/property/border.md)
- [background-color](https://www.css-dictionary.com/property/background-color.md)
- [accent-color](https://www.css-dictionary.com/property/accent-color.md)