ウェブ機能:
::selection
user-select
accent-color
color-scheme
scrollbar-color
scrollbar-width
:user-valid と :user-invalid
:placeholder-shown
::placeholder
field-sizing
resize（CSS プロパティ）
カスタマイズ可能な <select>
appearance
:has()
::file-selector-button
ブラウザで生成される UI のほとんどは、CSS を使用してある程度カスタマイズできます。最新の機能が必要な場合でも、古いブラウザでは適切に機能が制限されるため、ポリフィルやフォールバックが必要ないことがよくあります。
ブラウザの UI（フォーム コントロール、スクロールバー、選択、エラー メッセージなど）を再作成する前に、まず次の点を確認してください。
- 最新の CSS を使用しても、ブラウザの UI をニーズに合わせて十分にカスタマイズできない。
- 必要なカスタマイズが、組み込み UI を再作成するトレードオフを正当化するほど重要である。特に、ネイティブ UI が無料で提供する、アクセス可能なセマンティクス、キーボード処理、IME、AT 統合が失われる。
可能なカスタマイズの例:
::selectionを使用して、ハイライト表示されるテキストの色をカスタマイズします。- 避けるべきこと: コンテンツ テキストに
user-select: noneを適用する。コピー＆ペースト、翻訳ツール、AT の「ここから読み上げる」ジェスチャーが機能しなくなります。クローム（ドラッグ ハンドル、ツールバー、冗長なボタンラベル）に限定します。 accent-colorを使用して、ブラウザで生成された UI にページのアクセント カラーを適用します。color-schemeを使用して、ブラウザの UI をライトモード / ダークモードに適応させます。scrollbar-colorを使用してスクロールバーの色をカスタマイズし、scrollbar-widthを使用してスクロールバーの太さを制御します。つまみはトラックと明確に区別できるようにし（3:1 以上）、スクロール可能な領域にscrollbar-width: noneを設定しないでください（スクロールが別のアフォーダンスに完全に置き換えられている場合にのみ使用します）。- 有効性のスタイル設定には、
:invalid/:validではなく、:user-invalid/:user-validを使用します。これらは、ユーザーがフィールドを操作した後にのみ一致するため、ページ読み込み時に必須の空のフィールドをエラーとしてフラグ付けする、不適切なデフォルトを回避できます。inputを広範囲にターゲット設定する場合（例:input:not(input[type="range"]):user-valid）、スライダーを調整してもフィールドの有効性の境界や背景が適用されないように、範囲スライダーを除外します。 - ボタンとテキスト フィールド（
<textarea>を含む）は、通常、通常の要素としてスタイル設定できます。 font-sizeを使用してタイポグラフィをスケーリングし、その他のテキスト プロパティを使用してタイポグラフィを制御する
テキスト フィールドのスタイル設定（<input> と <textarea>）
ほとんどのスタイル設定（色、枠線、背景、タイポグラフィなど）では、これらの要素を通常のテキスト コンテナとして扱います。
:placeholder-shownと::placeholderを使用して、入力プレースホルダのスタイルを設定します。field-sizing: contentを使用して、テキスト フィールドのサイズをコンテンツに合わせます。<textarea>要素の場合、resize: verticalを使用して水平方向のサイズ変更を無効にするか、resize: noneを使用してすべてのサイズ変更を無効にします。
多肢選択コントロール（選択、ラジオボタン、チェックボックス）
- プルダウンに表示される複数のオプションから 1 つを選択するには、
<select>+appearance: base-select+::picker(select)を使用します。詳しくは、ブランド選択のスタイル設定をご覧ください。 - ページにインラインで配置された複数のオプションから 1 つ以上を選択する: 各オプションに
<label>内の<input type=checkbox>または<input type=radio>を使用します。label:has(:checked)を使用してスタイルを設定します。 appearance: none+ 生成されたコンテンツ（::before/::after）または背景画像を使用して、チェックボックス、ラジオボタン、スイッチのスタイルを設定し、チェックされた状態を描画します。
テキスト以外の <input>（ボタン、スライダー、ファイル入力など）
- ファイル入力:
::file-selector-buttonを使用してボタンのスタイルを設定します。 <input>は、typeがbutton、submit、resetのいずれかである場合は使用しないでください。代わりに<button>を使用し、通常の要素としてスタイルを設定します。- スライダー:
appearance: none+ つまみ疑似要素（::-webkit-slider-thumb、::-moz-range-thumbなど）とトラック疑似要素（::-webkit-slider-runnable-track、::-moz-range-trackなど）を使用して、より細かく制御します。