appearance プロパティ

最終更新：2026-09-13

appearance appearance プロパティ

appearance プロパティは、要素がブラウザのネイティブな外観（フォームコントロールのデフォルトのレンダリング）を使用するかどうかを制御します。none に設定すると、要素はネイティブな見た目を捨て、そのスタイルが CSS によって完全に制御されるようになるため、フォームコントロールをカスタマイズするための重要なプロパティとなります。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

appearance: none | auto;

⚙️ 値

値	タイプ	説明
`none \| auto`	キーワード	ネイティブな外観

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
appearance	✓ v79	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： appearance: none は、<select>、<input type="checkbox">、<input type="radio"> などのフォームコントロールをカスタマイズするために一般的に使用されます。

注意： 互換性のために、-webkit-appearance と -moz-appearance のプレフィックスも使用してください。appearance のブラウザサポートは若干異なります。

❓ よくある質問

Qappearance: none はコントロールからどのネイティブスタイルを削除しますか？

Aブラウザがフォームコントロールに追加するネイティブな外観を削除します。select のドロップダウン矢印、checkbox/radio のデフォルトのチェックスタイル、range のスライダートラック、search 入力のクリアボタン、number 入力のスピンボタンです。削除後、コントロールの視覚表現はゼロになり、CSS が完全に引き継ぎますが、機能は維持されます。クリック、選択、送信はすべて引き続き機能します。

Qappearance プロパティでデフォルトのコントロールの見た目を復元できますか？

Aはい、appearance: auto はブラウザのネイティブなレンダリングを復元します。ただし、ブラウザによって復元の程度が若干異なり、以前に none で大規模にカスタマイズしていた場合、復元後も微妙な不整合が残ることがあります。auto と none の 2 つの値に留めることをお勧めします。

Qappearance: none にすると select の矢印が消えましたが、カスタム矢印を追加するにはどうすればよいですか？

A背景画像で補いましょう。appearance: none でネイティブな矢印が削除された後、background: #fff url('arrow.svg') no-repeat right 12px center; を設定し、select に padding-right を追加して矢印のスペースを確保します。これはカスタムドロップダウンの典型的な方法です。クリック領域を十分に大きく保つだけで済みます。

Qappearance と -webkit-appearance の両方のプレフィックスを書く必要がありますか？

Aはい、お勧めします。-webkit-appearance は Safari や旧版の Chromium 向け、-moz-appearance は Firefox 向け、標準の appearance は新しいブラウザ向けです。Firefox では checkbox に効果を持たせるために今でも -moz-appearance: none が必要なため、3 つすべてを書くのが最も安全です。