appearance

背景・装飾

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

構文

Syntax
appearance: none | auto

コード例

例 1

appearance: none;

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

例 2

select { appearance: none; }

セレクトボックスの矢印を消す

例 3

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

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

例 4

appearance: auto;

ブラウザデフォルトの見た目

💡 TIPS

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

⚠️ よくある間違い

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

関連プロパティ

ブラウザサポート

Chrome 84+, Firefox 80+, Safari 15.4+ (プレフィックスなし)