CSSフォームコントロールのスタイリング レベル 1

1. 序論

この節は非規範的である。

ユーザーエージェントは長い間、フォームコントロールをスタイル付けするための非標準的な方法を提供してきた。 しかし、これらのコントロールはすべてユーザーエージェント間で一貫せずに実装されており、 作者に不要な摩擦を生じさせている。

このモジュールは、相互運用可能に使用できるよう十分な詳細さで、 一連のフォームコントロール部品を定義することを目的とする。

また、フォームコントロールをカスタマイズする新しい方法もいくつか定義し、 以前はカスタムコントロールをゼロから実装することでしか可能でなかった一般的なユースケースを扱う。 それは多くの作業を要し、 正しく行うのが難しく、しばしばアクセシビリティまたはプラットフォーム規約のいずれかを壊していた。

2. 基本外観へのオプトイン: appearance: base 値

appearance の定義をここに移す。

フォームコントロールに適用されると、base はそのコントロールを基本外観状態に置く。

基本 外観を持つコントロールは、標準 CSS および以下で定義される疑似要素を用いて一貫してスタイル付けでき、 UA 間で一貫する上書き可能なデフォルトスタイルを適用する。 コントロールがその状態にある場合、ユーザーエージェントは付録 A: 基本外観ユーザーエージェントスタイルシートのスタイルをその コントロールに適用する。

ユーザーエージェントは、§ 4 疑似要素で定義される疑似要素も有効にしなければならない。これらの疑似要素（::picker() を除く）は常に、 それらのappearance を起点要素から継承する。ユーザーエージェントは、 appearance: inherit !important 宣言を使用してこれを実装してよい。

注: この継承は、作者が同じコントロールにネイティブ部品と 非ネイティブ部品を混在させることを防ぐ。

2.1. 基本外観の設計原則

次の設計原則は、フォームコントロール向けの基本外観スタイルシートの設計に適用される。 重要度の高い順に示す:

1. スタイルはすべてのユーザーエージェントで同一である。

2. コントロールは追加のスタイルなしで、それ自体で認識可能かつ使用可能である。

3. コントロールは WCAG 2.2 AA 標準を 100% 満たす。

4. スタイルはコントロール間で一貫している…

   1. …見た目と操作感において。

   2. …コード内での定義方法において。

   3. …サイズ設定と相互作用において。

5. 複雑なリセットスタイルシートを必要とせず、ウェブサイトのブランディングに容易に適応できる:

   1. 最小限のコードを使用し、上書きが容易である。

   2. それ自体の強い voice & tone を持たず、可能な限り視覚的に単純である。

   3. 可能な限り新しいスタイルを定義するのではなく、ページのスタイルを継承する。

   4. 調整に対して堅牢である…

      1. …それ自身が変更された場合（例: フォント、ボーダー、レイアウトの変更）。

      2. …文脈内に置かれた場合（例: flex や grid の子になる準備ができている）。

6. 包括的である:

   1. 各コントロールのすべての状態を網羅する。

   2. すべての書字モードと配色をサポートする。

特に HTML フォームコントロールについては、これらの原則は 付録 A: 基本外観ユーザーエージェントスタイルシートで定義される必須ユーザーエージェントスタイルシートを通じて適用される。

2.2. 例

実装、実験、 bikeshedding、およびユーザーエージェントスタイルシートの改善を通じて、これらの例を洗練する。

これらの例の主な目的は、基本外観の設計原則が実際にどのように適用されるかを示すことである。

個々のコントロールに基本 外観を適用するには、次のコードを使用する:

input, textarea, meter, progress, button, select {
  appearance: base;
}

注: 次の例で使用されるフォームレイアウトは 詳細に述べない。

2.2.1. デフォルトのユーザーエージェント色

次に、ルート要素からデフォルトのライトモード色およびダークモード色をそれぞれ継承する基本 外観色を示す:

2.2.2. 色／フォントのカスタマイズ

次に、基本外観の上に行われるカスタマイズの例を示す:

form {
  font-family: "American Typewriter";
  background-color: rgb(254, 252, 221);
  color: rgb(131, 17, 0);
}

input, textarea, meter, progress, button, select {
  appearance: base;
}

form {
  font-family: "Courier New";
  font-size: 14px;
  background-color: rgb(0, 0, 0);
  color: rgb(0, 249, 0);
}

input, textarea, meter, progress, button, select {
  appearance: base;
}

3. ピッカーのスタイル付け

3.1. ::picker() 疑似要素

::picker() 疑似要素は、ページからポップアウトするフォームコントロールの部分を表す。

::picker() = ::picker( <form-control-identifier>+ )
<form-control-identifier> = select

::picker() 疑似要素は、起点要素が基本外観をサポートし、かつポップアップピッカーを持つ場合にのみ一致する。 指定された <form-control-identifier> は、 起点要素の一意なピッカー 名にも一致しなければならない。たとえば、 select 要素に対する一意なピッカー名は select である。

::picker() 疑似要素がレンダリングされるためには、それとその起点要素の両方が、算出された appearance として base を持たなければならない。

select, select::picker(select) {
  appearance: base;
}
select::picker(select) {
  border: 5px solid red;
  background-color: blue;
}

注: ::picker() の非関数形式は、 新しいピッカーがサポートされるようになったときに意図しないピッカーのスタイル付けを防ぐため、現在は動作しない。 すべてのフォームコントロールピッカーに対するスタイル付けが確定したら、この非関数形式はすべてのピッカーで動作する。

4. 疑似要素

フォームコントロールは、作者が個別にスタイル付けしたい多くの部品で構成されるため、 ユーザーエージェントが個々のフォームコントロール用の疑似要素を提供する必要がある。

以下の節では、最も一般的なユースケースを網羅しようとする一連の疑似要素を導入し、 それらをユーザーエージェント間で一貫した方法で扱えるようにする。

├─ ''::track''
│  └─ ''::fill''
└─ ''::thumb''

図を追加する。

4.1. ピッカーを開くアイコン: ::picker-icon 疑似要素

::picker-icon 疑似要素は、 ピッカーの存在を示すアイコンを表すコントロールの部分を表す。 これは、起点要素が基本外観を持ち、かつピッカーを開く場合にのみ生成される。 これは完全にスタイル付け可能な疑似要素であり、その起点要素から継承する。

::picker-icon は、起点要素の子であるかのようにボックスを生成し、::after 疑似要素により生成される任意のボックスの後に置かれ、 content により指定される内容を持つ。

4.2. ファイルセレクターボタン: ::file-selector-button 疑似要素

::file-selector-button 疑似要素は、UA がそのようなボタンをレンダリングする場合に、 ファイルピッカーを開くために使用されるボタンを表す。

通常これは、 button 要素の内側にある input 要素（type=file）を対象とする。 これは要素に裏付けられた疑似要素である。

::file-selector-button { border: 3px solid green }

4.3. チェックマークのスタイル付け: ::checkmark 疑似要素

::checkmark 疑似要素は、項目がチェックされているかどうかのインジケーターを表し、 チェックボックス、ラジオ、および option 要素上に存在する。

これは、起点要素が :checked 疑似クラスをサポートし、かつ基本外観を持つか、または 基本外観を持つ祖先を持つ場合にのみ生成される。 これは完全にスタイル付け可能な疑似要素であり、その起点要素から継承する。

チェックボックスおよびラジオ要素については、これは起点要素の子であるかのようにボックスを生成し、::before と ::after 疑似要素により生成されるボックスの間に置かれ、content により指定される内容を持つ。

option 要素については、これは起点 要素の子であるかのようにボックスを生成し、::before 疑似要素により生成される任意のボックスの前に置かれ、content により指定される内容を持つ。

::checkmark { background-image: url(...) }

:indeterminate::checkmark { background-image: url(...) }

4.4. スライダー状コントロールの部品のスタイル付け: ::thumb, ::track および ::fill 疑似要素

命名はまだ 議論中である。[Issue #9830]

スライダー状 コントロールとは、進行状況を表すフォームコントロールである。 その進行状況はユーザーにより調整可能な場合がある。

次の疑似要素は、それらの異なる部品をスタイル付けするために提供される:

::thumb

::thumb 疑似要素は、 ユーザーがコントロールの進行状況を調整できる部分を表す。

注: 通常、ほとんどのユーザーエージェントではネイティブに 円としてレンダリングされる。

::track

::track 疑似要素は、コントロールの進行済み部分と未進行部分の 両方を含む部分を表す。

::fill

::fill 疑似要素は、 コントロールの進行済み部分を含む部分を表す。

コントロールの進行状況が未確定である場合（<progress indeterminate> のような場合）、 ユーザーエージェントはこの部分の inline-size をゼロにしなければならない。

これらの疑似要素は完全に スタイル付け可能な疑似要素であり、その構造は次のとおりである:

<input type="range">
├─ ::track
│  └─ ::fill
└─ ::thumb

スライダー状コントロールの一覧はホスト言語に依存する。HTML では、 これは次に対応する:

• progress

• meter

• input 要素（type="range"）

• input 要素（type="checkbox" switch）

4.5. テキストフィールドの部品のスタイル付け: ::field-text および ::clear-icon 疑似要素

::placeholder

::placeholder 疑似要素は、 placeholder テキストを含む input の部分を表す。

::field-text

::field-text 疑似要素は、 編集可能なテキストを含む input の部分を表す。

::clear-icon

::clear-icon 疑似要素は、 ユーザーエージェントにより提供される場合に、クリックされたとき ユーザーが input をクリアできる input の部分を表す。

appearance: textfield の場合、ユーザーエージェントは この部品を生成してはならない。

::field-text と ::clear-icon は兄弟でなければならない。

autofill で使用される部品を 収集する。

それを実装するユーザーエージェント向けに、 パスワード表示切り替えについて何かを定義するか？ [Issue #11845]

::placeholder が ::field-text とどのように相互作用するかを定義する。[Issue #11844]

4.6. textarea の部品のスタイル付け: ::placeholder および ::field-text 疑似要素

::placeholder

::placeholder 疑似要素は、 placeholder テキストを含む textarea の部分を表す。

::field-text

::field-text 疑似要素は、 編集可能なテキストを含む textarea の部分を表す。

リサイザーについて何かを定義する。[Issue #11850]

::placeholder が ::field-text とどのように相互作用するかを定義する。[Issue #11844]

4.7. 数値フィールドの部品のスタイル付け: ::step-control, ::step-up および ::step-down 疑似要素

これらの疑似要素は数値入力用に提供される。これらは完全に スタイル付け可能な疑似要素である。

::step-control

::step-control 疑似要素は、 上下ボタンを含む数値入力の部分を表す。

::step-up

::step-up 疑似要素は、 作動したときに数値入力内の値を増加させるボタンを表す。

::step-down

::step-down 疑似要素は、 作動したときに数値入力内の値を減少させるボタンを表す。

それらの構造は次のように定義される:

<input type="number">
├─ ::field-text
└─ ::step-control
   ├─ ::step-up
   └─ ::step-down

<input type="number">

input[type=number] {
  appearance: base;
  &::step-control {
    display: contents;
  }
  &::step-up {
    order: 1;
    content: "+";
  }
  &::field-text {
    order: 2;
  }
  &::step-down {
    order: 3;
    content: "-";
  }
}

appearance: textfield の場合、ユーザーエージェントはこの部品を生成してはならない。

4.8. 日付／時刻入力フィールドの部品のスタイル付け: ::field-component および ::field-separator 疑似要素

::field-component

::field-component 疑似要素は、 日付／時刻コンポーネント値を含むコントロールの部分を表す。

::field-separator

::field-separator 疑似要素は、 ユーザーエージェントがそれらの部分を提供する場合に、日付／時刻コンポーネント値を区切る コントロールの部分を表す。

これらの疑似要素は兄弟である。コントロールの正確な構造は国際化 およびホスト言語により決定されるが、 ユーザーエージェント間で一貫していなければならない。

<input type="date">

<input type="date">
├─ ::field-component (08)
├─ ::field-separator (/)
├─ ::field-component (22)
├─ ::field-separator (/)
├─ ::field-component (2024)
└─ ::picker-icon

4.9. 色スウォッチ: ::color-swatch 疑似要素

名前は ::swatch と ::color-swatch のどちらにすべきか？ [Issue #11837]

::color-swatch 疑似要素は、選択された色値を表示する コントロールの部分を表す。

input[type=color], ::color-swatch { border-radius: 100%; }

4.10. ベンダー疑似要素拡張との互換性

可能な場合、ユーザーエージェントは非標準疑似要素を実装するためにエイリアス化を使用すべきである。

不可能な場合、ユーザーエージェントは標準疑似要素を appearance: base 用に予約し、非標準のものは appearance: none 用に使用しなければならない。

5. 疑似クラス

5.1. 異なる meter 状態の対象化: :low-value / :high-value / :optimal-value 疑似クラス

これが UA ロジックを再現できることを確認する。[Issue #11336]

これらを HTML の 定義にリンクする。

:low-value 疑似クラスは、 meter 要素の値が low HTML 属性により指定される値を下回る場合に一致する。

:high-value 疑似クラスは、 meter 要素の値が high HTML 属性により指定される値を上回る場合に一致する。

:optimal-value 疑似クラスは、 meter 要素の値が optimum / low / high HTML 属性により決定される範囲内にある場合に一致する。

5.2. リストボックスである select の対象化

何かを定義する。[Issue #7422]

6. control-value() 関数

これは 実装の準備ができていない。これに関する issue を提出する。

データ漏出に関して、 プライバシー上の影響を検討する。[Issue #11860]

より多くの 型を追加することを検討する。[Issue #11842]

control-value() 関数は、それが置かれたフォーム コントロールの現在値に算出される。フォームコントロールでない要素に使用された場合、 空文字列を返す。

<control-value()> = control-value( <type>? )

<type> = '<' [ number | string ] '>'

疑似要素に使用された場合、これはその起点要素に対して評価される。

input[type=range]::after {
  content: control-value();
}

7. ウィジェットのスタイル付け

field-sizing/accent-color/input-security をこの仕様に移すか？

7.1. スライダー状コントロールの向きの変更: slider-orientation

このプロパティを作り直す。

auto

スライダー状 コントロールの向きは、書字モードおよび方向により定義される。

left-to-right

スライダー状 コントロールは水平にレンダリングされ、::fill はコントロール内で左揃えされる。

right-to-left

スライダー状 コントロールは水平にレンダリングされ、::fill はコントロール内で右揃えされる。

top-to-bottom

スライダー状 コントロールは垂直にレンダリングされ、::fill はコントロール内で上揃えされる。

bottom-to-top

スライダー状 コントロールは垂直にレンダリングされ、::fill はコントロール内で下揃えされる。

付録 A: 基本外観ユーザーエージェントスタイルシート

HTML に移す。

この節は 実装により洗練する必要がある。

色入力スタイルは 洗練する必要がある。[Issue #11837]

基本

input,
textarea,
button,
::file-selector-button,
select,
meter,
progress {
    color: inherit;
    font: inherit;
    box-sizing: border-box;
    background-color: transparent;
}

レイアウト

input:not([type=file], [type=range]),
textarea,
button,
::file-selector-button,
::track,
select,
meter,
progress {
  border: 1px solid currentColor;
  background-color: transparent;
}

スライダー

meter、progress、 switch および range input のスタイル付けを洗練する。

::track {
  height: 1em;
}

::fill {
  height: 100%;
  background-color: currentColor;
}

::thumb {
  border-radius: 0;
  border: none;
  background-color: currentColor;
  appearance: none;
  width: 1em;
  height: 100%;
}

チェックボックスと ラジオ

input:is([type=checkbox]:not([switch]), [type=radio]) {
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    content: '';
}

input[type=radio] {
    border-radius: 100%;
}

input[type=checkbox]:not([switch]):checked::checkmark {
    content: '\2713' / '';
}

input[type=radio]:checked::checkmark {
    background-color: currentColor;
    display: inline-block;
    border-radius: inherit;
    height: 100%;
    width: 100%;
}

Select と button

select {
  /* Base appearance select always sizes based on its contents. */
  field-sizing: content !important;
}

button,
::file-selector-button,
select,
input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) {
  border: 1px solid currentColor;
  background-color: transparent;
  color: inherit;
  /* Padding prevents the text from sticking to the borders.
   * optically centered to account for half leading */
  padding-block: 0.25em;
  padding-inline: 0.5em;

  /* <select>s and <button>s should have border-radius to be
   * distinct from <input>s: https://github.com/w3c/csswg-drafts/issues/10857#issuecomment-2520875011*/
  border-radius: 0.5em;

  /* These min-size rules ensure accessibility by following WCAG rules:
   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
   * The 1.2em is there to make sure that options without text don't change
   * the block size of the button. */
  min-block-size: max(24px, 1lh);
  min-inline-size: 24px;

  /* box-sizing comes from existing UA styles which happen to
   * already be interoperable. */
  box-sizing: border-box;

  /* Push picker icon to the right of the box and have some space
   * in between it and the text. */
  display: inline-flex;
  gap: 1em;

  user-select: none;
}
:is(button, select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):enabled:hover,
:enabled::file-selector-button:hover {
  background-color: color-mix(in lab, currentColor 10%, transparent);
}
:is(button, select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):enabled:active,
:enabled::file-selector-button:active {
  background-color: color-mix(in lab, currentColor 20%, transparent);
}
:is(button, select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):disabled,
:disabled::file-selector-button {
  color: color-mix(in srgb, currentColor 50%, transparent);
}

select > button:first-child {
  /* Prevents button from setting font, color, or background-color */
  all: unset;

  /* Prevents duplicate box decorations */
  display: contents;

  /* Prevents button activation behavior so select can handle events */
  interactivity: inert;
}
select option {
  /* These min-size rules ensure accessibility by following WCAG rules:
   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
   * Unset if the author provides a child button element.
   * The 1lh is there to make sure that options without text don't change
   * the block size of the option. */
  min-inline-size: 24px;
  min-block-size: max(24px, 1lh);

  /* Centers text within the block (vertically). From OpenUI discussion:
   * https://github.com/openui/open-ui/issues/1026#issuecomment-2103187647. */
  align-content: center;

  /* centering + gap between checkmark and option content */
  /* also easily reversed, when checkmark should be inline-end */
  display: flex;
  align-items: center;
  gap: 0.5em;

  /* Makes options with long text widen picker instead
   * of making options tall. */
  white-space: nowrap;
}
select option:enabled:hover {
  background-color: color-mix(in lab, currentColor 10%, transparent);
}
select option:enabled:active {
  background-color: color-mix(in lab, currentColor 20%, transparent);
}
select option:disabled {
  color: color-mix(in lab, currentColor 50%, transparent);
}
select option::checkmark {
  content: '\2713' / '';
}
select option:not(:checked)::checkmark {
  visibility: hidden;
}

select optgroup {
  /* font-weight makes optgroups visually distinct from options. */
  font-weight: bolder;
}

select optgroup option {
  /* Undo font-weight:bolder rule from optgroups. */
  font-weight: normal;
}

select legend,
select option {
  /* spacing ownership moves to children */
  /* space inline from border edges */
  /* this creates a full bleed hover highlight */
  padding-inline: 0.5em;
}

select::picker-icon {
  /* margin-inline-start pushes the icon to the right of the box */
  margin-inline-start: auto;
  display: block;
  content: counter(-ua-disclosure-open, disclosure-open);
}

::picker(select) {
  /* Same properties as popover and dialog */
  color: CanvasText;
  background-color: Canvas;
  border: 1px solid;

  /* box-sizing is set to match the button. */
  box-sizing: border-box;

  /* Remove [popover] padding which
   * prevents options from extending to edges */
  padding: 0;

  /* Anchor positioning and scrollbars */
  inset: auto;
  margin: 0;
  min-inline-size: anchor-size(self-inline);
  min-block-size: 1lh;
  /* Go to the edge of the viewport, and add scrollbars if needed. */
  max-block-size: stretch;
  overflow: auto;
  /* Below and span-right, by default. */
  position-area: block-end span-inline-end;
  position-try-order: most-block-size;
  position-try-fallbacks:
    /* First try above and span-right. */
    block-start span-inline-end,
    /* Then below but span-left. */
    block-end span-inline-start,
    /* Then above and span-left. */
    block-start span-inline-start;
}

付録 B: 探索

基本スタイル付けの提案

この節では、フォームスタイル付け問題を解決するためのいくつかの提案を概説する。

プロトタイプ

もともと fantasai により提案されたこの考えは、 少数の「プロトタイプ」要素をスタイル付けできる、というものである。 ブラウザー UI 設計者は、その後それらの要素のスタイル付けを受け取り、 その設計を自分たちの UI に外挿できる。 最低限、テキスト、背景、ボーダーのようなものを使用できる。 限界として、内部 padding、border-radius などのようなものも使用されるかもしれない。

@control button {
  <declaration-list>
}

@control input {
  <declaration-list>
}

input::selection {
  <declaration-list>
}

...

次のスタイルを使用できるようになる:

• フォント選択（css-fonts）

• テキスト装飾（css-text-decor）

• テキストレイアウト（css-text）

• 背景とドロップシャドウ（css-backgrounds）

• ボーダーと padding（css-backgrounds）

• フィルター

• その他、我々または UA が関連すると判断するあらゆるもの

ほとんどのフォームコントロールは、カレンダーウィジェットや時計であっても、 何らかの形でこれら 3 つのプリミティブの組み合わせである。UA に これら 3 つのプリミティブ、おそらくさらに 1 つか 2 つのスタイル付けが与えられれば、 残りをどのようにスタイル付けするかを理解できる。

たとえば、カレンダーウィジェットは月、年、それらを移動するためのいくつかのボタン、 それらをクリックして直接編集できる機能、 および月の日付の表現を持つかもしれない。選択された日は選択されている。 おそらくボタンは :hover または :focus 時にのみ表示される -- UA が決定する。しかし UA は、ボタンが特定の青の色合い、特定の border-radius と drop-shadow を持つべきことを知っている。 カレンダーは入力フィールドの色で表示され、選択された日は選択色で表示され、 あらゆる点でページ内の他の入力フィールドの見た目と一致する。

これで、作者は、たとえば年と月名の間隔や、 年を変更するボタンの矢印が塗りつぶしか輪郭のみか、装飾的なものかを決めることはできない。 また、月とその下の日フィールドの間に 5px の間隔を持つ黒い実線の半ボーダーを 設けるべきだと決めることもできない。しかしカレンダーはページに属しているように見え、 UA は横に広いが縦に短いスマートウォッチに搭載する場合に、月と年を横に置いた方がよい 別のカレンダーレイアウトを、何も壊すことなく考案できる。

黒い領域は ボタン色である。その非常に薄い透明版を ガラス色にできる。ローラーは入力色である。

もっと文脈がなければ 判別しにくいが、右側のものについては、 時計面とデジタル表示は @input 色で、強調された部分は highlight 色、 Done ボタンはボタンのスタイル付けであり、 時計面の周囲の影付き領域はボタン背景と同じ色である。

反転システム色

もともと Florian と Tab によりスケッチされたこの考えは、 UI 設計者が UI に色を付ける際に選択できる 抽象的な色の集合を定義することである。

Android 色抽出 API 提案からの、Tab の提案する色集合:

• Light/Normal/Dark Vibrant

• Light/Normal/Dark Muted

• Vibrant Complementary（視覚的に区別される必要がある call-out ボタンなど用）

（light はおよそ 75% の明度、normal はおよそ 50%、dark はおよそ 25%; vibrant は少なくとも 30% の彩度、理想的には 100%、muted は最大 40% の彩度、理想的には 30%）

• Light/Dark Contrasting Text

• Light/Dark Contrasting Secondary Text

これで 11 色になり、その多くはウェブページ自身の配色から描画可能であるべきである。 少なくともいくつかを指定すれば、それらの一部を自動生成できる。 たとえば "normal-vibrant" 色から light/dark バリアントを生成したり、 必要に応じてテキスト色を白／黒に自動設定したりできる。

ただし、入力 UI が、ページの残り部分と同じ方法でその色を使用する保証はない。

その他のコントロール固有の提案

<progress> および <meter> のスタイル付け

<select> と <datalist> のスタイル付け提案および／またはホワイトボード写真を挿入する。

Select／Datalist ドロップダウン

1. color と background の両方が設定されている場合にのみスタイル付けを許可する。

2. Option コンテナー:

   • 背景

   • ボーダー

   • padding

3. option

   • padding

   • ボーダー

   • border-collapse?

   • 背景

   • display-inside は許可され、自動的に block 化される

   • margin、position、float、width、height は不可

すべての option は contain:paint かつ BFC である。

入力 UI の例

この節では、スクリーンショットを撮れる限り多くの入力 UI 例を集める。 特に、少し「奇妙」なものになりがちなモバイルデバイス上の例を対象とする。

時刻ピッカー

日付ピッカー

プライバシーに関する考慮事項

この仕様について、新たなプライバシーに関する考慮事項は報告されていない。

セキュリティに関する考慮事項

この仕様について、新たなセキュリティに関する考慮事項は報告されていない。

謝辞

この提案への意見について、Aditya Keerthi、Anne van Kesteren、Elika Etemad、Jen Simmons、Joey Arhar、Jon Davis、Simon Fraser および Theresa O’Connor に感謝する。

input[type=range] のスタイル付けについて詳細な 分析を行った Ana Tudor に感謝する。