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

appearance property

appearance プロパティはフォーム要素のプラットフォーム固有のスタイリングを制御する。appearance: none を使用するとOS・ブラウザのデフォルト外観を完全にリセットし、独自デザインのフォーム要素を一から構築できる。

フォームリセット

概要

appearance プロパティはフォーム要素のプラットフォーム固有のスタイリングを制御する。appearance: none を使用するとOS・ブラウザのデフォルト外観を完全にリセットし、独自デザインのフォーム要素を一から構築できる。

対応ブラウザ

デスクトップ

Chrome 84+
Edge 84+
Safari 15.4+
Firefox 80+

モバイル

Chrome Android 84+
Safari iOS 15.4+
Firefox Android 80+

基本構文

CSS 
/* セレクトボックスのリセット */
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;
}

/* チェックボックスのカスタム */
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;
}

実務での使いどころ

  • カスタムフォーム要素

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

  • クロスブラウザ統一

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

注意点

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

アクセシビリティ

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

参考リンク