Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。フォームのカスタムデザインに必須。

appearance property

appearance は CSS のプロパティで、フォームコントロールなどの置換された UI ウィジェット要素のレンダリングされた外観を指定します。最も一般的な場合、これらの要素にはオペレーティングシステムのテーマに基づくネイティブでプラットフォーム特定のスタイルが適用されるか、 CSS を使用して上書き可能なスタイルによる基本的な外観が指定されます。

フォームリセット

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
appearance
84
84
80
15.4
84
15.4
auto
83
83
80
15.4
83
15.4
button
1
12
1
3
18
2
checkbox
1
12
1
3
18
2
listbox
1
12
1
3
18
2
menulist
1
12
1
3
18
2
menulist-button
1
12
80
3
18
1
meter
1
12
1
3
18
2
none
1
12
54
3
18
3
progress-bar
1
12
1
3
18
2
radio
1
12
1
3
18
2
searchfield
1
12
1
3
18
2
textarea
1
12
1
3
18
2
textfield
1
12
1
3
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (64)
  • ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (80)
実装メモ
  • バグ 1481615 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (54)
実装メモ
  • `<input type="checkbox">` および `<input type="radio">` では機能しません。

基本構文

CSS 
/* Reset for select boxes */
select {
  appearance: none;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 32px 8px 12px;
  background-image: url('chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Customize checkboxes */
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #6b7280;
  border-radius: 4px;
}

input[type="checkbox"]:checked {
  background: #2563eb;
  border-color: #2563eb;
}

ライブデモ

customselect

appearance property customselect demo.

プレビュー全画面表示

customcheckbox

appearance property customcheckbox demo.

プレビュー全画面表示

Custom button

appearance property custombutton demo.

プレビュー全画面表示

実務での使いどころ

  • カスタムフォーム要素

    select・checkbox・radio ボタンのデフォルト外観をリセットして独自デザインを適用。

  • クロスブラウザ統一

    OS・ブラウザ間のフォーム要素の見た目の差異を解消し、一貫したデザインを実現。

注意点

  • appearance: none でリセットするとアクセシビリティ関連のデフォルト動作も失われる場合がある。
  • 一部の要素（特に date input）は完全なリセットが困難な場合がある。

アクセシビリティ

  • カスタムフォーム要素はキーボード操作・フォーカス表示・スクリーンリーダー対応を必ずテストする。
  • チェックボックスやラジオボタンのカスタム時は :checked 状態の視覚的フィードバックを必ず提供。

参考リンク