CSS Form Control Styling Module Level 1

2.1. `基本的な外観$用の設計-原則

~form~control用の`基本的な外観$を与える~stylesheetの設計には、 概ね重要度が高いものから順に，次に挙げる設計-原則が適用される： ◎ The following design principles apply to the design of the basic appearance stylesheet for form controls, in approximate order of descending importance:

1. 各~UAにわたって，それらの~styleは一致する。 ◎ The styles are identical in every user agent.
2. 各種~controlは、 追加的な~styleを要することなく，それ自体で認識-可能かつ利用-可能である。 ◎ The controls are recognizable and usable on their own without additional styles.

3. 各種~controlは、 当初から~accessibilityを~targetにする — 理想的には、 `WCAG 2.2 AA 標準＠~TR/WCAG22/$ に合格するよう。 ◎ The controls target accessiblity out of the box, ideally passing WCAG 2.2 AA standards.

   注記： 作者は、 自身の~controlが~access可能になることを確保するためには，更なる調整が必要になることもある — ［ 当の~form~controlに対する~custom化 ］や［ 当の~form~controlが どの文脈の中へ配置されたか ］に依存して。 `基本的な外観$においては、 作者が~access不能にする調整も防止されないので。 ◎ NOTE: Authors may need to do extra adjustments to ensure their controls are accessible depending on any customizations as well as the context the form control is placed into. The basic appearance does not prevent adjustments by the author that are inaccessible.

4. 各~controlにまたがって，~styleは次に関して一貫する： ◎ The styles are consistent across controls…

   1. 見かけと感触 ◎ …in look & feel.
   2. それらが~code内でどう定義されるか ◎ …in how they are defined in code.
   3. ~sizingとヤリトリ ◎ …in sizing and interaction.

5. ~styleは、 複階的な再設定~stylesheetを必要とせずに， ~web~siteの~brand法に容易に順応する — それらは： ◎ The styles are easily adapted to the website’s branding, without needing complex reset stylesheets:

   1. 最小限な~codeを利用し，容易に上書きできる。 ◎ They use minimal code and are easy to override.
   2. 自前の強い~~独自性（ `voice & tone^en ）を有さず，アリな限り視覚的に単純である。 ◎ They do not have a strong voice & tone of their own, and are visually as simple as possible.
   3. アリなときは、 新たな~styleを定義することなく，~pageの~styleを継承する。 ◎ They inherit page styles rather than define new styles whenever possible.
   4. ［ 自身／それが置かれた文脈 ］が変化することによる調整に対し，~~耐性がある（ `resilient^en である）。 （前者の例： 自身の［ ~font／~border／~layout ］が変化したとき） （後者の例：［ `~flex容器$や`格子~容器$ ］における子として準備済みである） ◎ They are resilient to adjustments… • …when changed themselves (e.g. changing font, border, layout). • …when put in context (e.g. ready to be flex or grid children).

6. 包括的である： ◎ They are comprehensive:

   1. 各~control用のすべての状態を受持っている。 ◎ Covering all states for each control.
   2. すべての`書字~mode$を~supportしている。 ◎ Supporting all writing modes＼
   3. すべての`色~scheme$を~supportしている。 ◎ and color schemes.

特定的に，~HTML~form~control用には、 これらの原則は，要求される~UA~stylesheet — `§ 基本的な外観~用の~UA~stylesheet＠#basic-appearance-stylesheet$ にて定義されるそれ — を通して適用される。 ◎ For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in Appendix A: Basic Appearance User Agent Stylesheet.

2.2. 例

これらの例を~UA~stylesheetに対する［ 実装, 試験結果, 意見交換, 改善 ］を通して精緻化する。 ◎ Refine these examples through implementation, experimentation, bikeshedding and improvements to the user agent stylesheet.

これらの例の主な目的は、 実施において， `基本的な外観$用の設計-原則がどう適用されるかを示すことにある。 ◎ The main purpose of these examples is to show how the design principles for the basic appearance apply in practice.

個々の~controlに対し，`基本的な外観$を適用するためには、 次の~codeが利用される： ◎ To apply the basic appearance on individual controls, the following code is used:

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

注記： 以下に挙げる例により利用される~form~layoutは、 詳細なものでない。 ◎ NOTE: The form layout used by the following examples is not detailed.

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.1. `picker()^pe 疑似要素

`picker()@pe 疑似要素は、 ~form~controlを成す［ ~pageから飛び出る部分 ］を表現する。 ◎ The ::picker() pseudo-element represents the part of the form control that pops out of the page.

::picker()
	= ::picker( `form-control-identifier$t+ )
`form-control-identifier@t
	= select

`picker()$pe 疑似要素は、 その`出自の要素$が ~AND↓ を満たすときに限り，合致するモノトスル： ◎ The ::picker() pseudo-element only matches when＼

• `基本的な外観$を~supportする ◎ the originating element supports basic appearance＼
• ~popupする~pickerを有する ◎ and has a popup picker.＼
• その `一意な~picker名@ は、 指定された `form-control-identifier$t に合致する。 例えば、 `select$e 要素~用の`一意な~picker名$は `select^v になる。 ◎ The specified <form-control-identifier> must also match the unique picker name of the originating element. For example, the unique picker name for the select element is select.

`picker()$pe 疑似要素は、 次が満たされる場合に限り， 具現化するモノトスル ⇒ ［ 自身, その`出自の要素$ ］の `appearance$p の`算出d値$は、 どちらも `base$v になる。 ◎ In order for the ::picker() pseudo-element to be rendered, it and its originating element must both have a computed appearance of base.

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

注記： `picker()$pe の関数形でない形 `picker^pe は、［ 新たな~pickerが~supportされるに伴い，それらに意図されない~styleが適用される ］ことを防止するため，現時点では働かない。 すべての~form~controlに対する~picker用の~style付けが完結したなら、 関数形でない形は，すべての~picker用に働くことになる。 ◎ NOTE: The non-functional form of ::picker() currently doesn’t work to prevent unintended styling of pickers as new pickers become supported. Once styling for all form control pickers is finalized, this non-functional form will work for all pickers.

4.1. ~picker【！~opener】~icon： `picker-icon^pe 疑似要素

`picker-icon@pe 疑似要素は、 当の~controlを成す［ ~pickerが在ることを表す~iconが占める部分 ］を表現する。 この疑似要素は： ◎ The ::picker-icon pseudo-element represents the part of the control that represents the icon denoting the presence of the picker.＼

• 次が満たされるときに限り，生成される ⇒ ［ その`出自の要素$は`基本的な外観$を有する ］~AND［ それ†は，ある~pickerを開く ］

  【† 当の疑似要素, 出自の要素どちらなのか，はっきりしない （~iconは、 単に “~pickerが在ることを表す” だけで，~pickerを開くものは他の何かかもしれない）。 】

  ◎ It is only generated when the originating element has basic appearance and if it opens a picker.＼
• `全部的に~style可能な疑似要素$であり， `出自の要素$から~styleを継承する。 ◎ It is a fully styleable pseudo-element and inherits from its originating element.
• その`出自の要素$の子であったかのように~boxを生成する — 【`出自の要素$の】 `after$pe 疑似要素が生成する~boxより後に。 ◎ ::picker-icon generates a box as if it was an child of its originating element, after any boxes generated by the ::after pseudo-element,＼
• `content$p ~propにより指定されたとおりの内容を伴う。 ◎ with content as specified by content.

4.2. ~file~pickerを開く~button： `file-selector-button^pe 疑似要素

`file-selector-button@pe 疑似要素は、 ~file~pickerを開くために利用される~buttonを表現する — ~UAが，そのような~buttonを具現化するならば。 ◎ The ::file-selector-button pseudo-element represents the button used to open a file picker, if the UA renders such a button.

この疑似要素は、 概して， `type=file^a を伴う `input$e 要素の内側にある~button【！`button$e】を~targetにする。 ◎ It typically targets the button inside an input element with type=file.

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

4.3. ~checkmarkの~style法： `checkmark^pe 疑似要素

`checkmark@pe 疑似要素は： ◎ The ::checkmark pseudo-element＼

• ［ 当の~itemは~checkされたか否か ］を表す指示子を表現する。 ◎ represents an indicator of whether the item is checked,＼

• その`出自の要素$ — 以下 %要素 — が ~AND↓ を満たすときに限り生成される：

  • `checked$ps 疑似類を~supportする

    特に、 次に挙げるものは，該当する ⇒＃ ~checkbox, ~radio, `option$e 【！option】要素

  • 自身または ある先祖は`基本的な外観$を有する
  ◎ and is present on checkboxes, radios, and option elements. ◎ It is only generated when the originating element supports the :checked pseudo-class, and either has basic appearance or an ancestor with basic appearance.＼
• `全部的に~style可能な疑似要素$であり， %要素 から【~styleを】継承する。 ◎ It is a fully styleable pseudo-element and inherits from its originating element.
• `content$p ~propにより指定されたとおりの内容を伴う。 ◎ ↓

• %要素 の子であったかのように~boxを生成する — この~boxは：

  • %要素 は［ ~checkbox, ~radio ］である場合、 【 %要素 の】［ `before$pe, `after$pe ］疑似要素が生成する~boxの合間にある
  • %要素 は `option$e 【！~option】要素である場合、 【 %要素 の】 `before$pe 疑似要素が生成する~boxに先行する。
  ◎ For checkboxes and radio elements,＼ ↑ it generates a box as if it was an child of its originating element,＼ between the boxes generated by the ::before and ::after pseudo-element,＼ ↑ with content as specified by content. ◎ ↑ For option elements, it generates a box as if it was an child of its originating element,＼ preceding any boxes generated by the ::before pseudo-element,＼ ↑ with content as specified by content.

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

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

4.4. ~sliderの様な~controlを成す各部の~style法： `slider-thumb^pe, `slider-track^pe, `slider-fill^pe 疑似要素

`~sliderの様な~control@ とは、 利用者【または作者†】が調整-可能な進捗を表現する~form~controlである。 ◎ Slider-like controls are form controls that represent progress. That progress may be adjustable by the user.

【† 該当するものとして以下に挙げられる［ `progress$e, `meter$e ］要素においては、 “利用者” とは，作者（~scriptの利用者）を指すであろう。 】

それを成す各部には、 次に挙げる疑似要素が供される： ◎ The following pseudo-elements are provided to style their different parts:

`slider-thumb@pe

この疑似要素は、［ 当の~controlの進捗を調整する ］ことを［ 利用者に許容する部位 ］を表現する。 ◎ The ::slider-thumb pseudo-element represents the portion that allows the user to adjust the progress of the control.

注記： ほとんどの~UAにおいては、 概して，~nativeには円として具現化される。 ◎ NOTE: It is typically natively rendered as a circle in most user agents.

`slider-track@pe

この疑似要素は、 当の~controlを成す［ 進捗-済みな部位, 進捗-済みでない部位 ］【！を包含している部位】を表現する。 ◎ The ::slider-track pseudo-element represents the portion containing both the progressed and unprogressed portions of the control.

`slider-fill@pe

この疑似要素は、 当の~controlを成す進捗-済みな部位【！を包含している部位】を表現する。 ◎ The ::slider-fill pseudo-element represents the portion containing the progressed portion of the control.

当の~controlの進捗は不定である場合 （例： 【 `value^a 属性が省略された】 `progress$e 要素）、 ~UAは，この部位の`行内~size$を 0 にするモノトスル。 ◎ When the progress of control is indeterminate (like with <progress>), the user agent must give this portion an inline-size of zero.

これらの疑似要素は、 `全部的に~style可能な疑似要素$である — その構造は： ◎ These pseudo-elements are fully styleable pseudo-elements and their structure is the following:

何が`~sliderの様な~control$を成すかは、 ~host言語に依存する。 ~HTMLにおいては、 次に挙げる要素に対応する： ◎ The list of slider-like controls depends on the host language. For HTML, this corresponds to:

• `progress$e ◎ progress
• `meter$e ◎ meter
• `input$e 要素のうち `type="range"^a を伴うもの ◎ input elements with type="range"
• `input$e 要素のうち `type="checkbox" switch^a を伴うもの ◎ input elements with type="checkbox" switch

4.5. ~text~field用の各部の~style法： `field-text^pe, `reveal-icon^pe, `clear-icon^pe 疑似要素

`input$e 要素においては： ◎ ↓

`placeholder@pe

この疑似要素は、 当の要素を成す［ 仮入力~textを包含する部位 ］を表現する。 ◎ The ::placeholder pseudo-element represents the portion of the input that contains the placeholder text.

`field-text@pe

この疑似要素は、 当の要素を成す［ 編集-可能な~textを包含する部位 ］を表現する。 ◎ The ::field-text pseudo-element represents the portion of the input that contains the editable text.

`reveal-icon@pe

この疑似要素は、 当の要素を成す［［ ~clickされたとき，`敏感な~text入力$の隠蔽を一時的に不能化する ］ことを利用者に許容する部位 ］を~UAが供したならば，それを表現する。 ◎ The ::reveal-icon pseudo-element represents the portion of the input that allows the user to temporarily disable obscuring of sensitive text input when clicked if provided by the user agent.

`reveal-icon$pe を供している~UAは、［ `敏感な~text入力$が意図nに反して露呈される ］ことから保護する一助として，［ そうなり得る状況下においては， `reveal-icon^pe を除去する ］ことを選んでもヨイ。 ◎ User agents providing ::reveal-icon may choose to remove it in some circumstances to help protect sensitive text input from being revealed unintentionally.

注記： `敏感な~text入力$が意図nに反して露呈されることを避ける軽減策を成す例として、 次に挙げるいずれかが生じたときは， `reveal-icon$pe を除去することが挙げられる：

• ~focusが当の~fieldから他へ移動したとき。
• ~scriptが~field内容を改変したとき。
• 当の~fieldが~UAの~autofill特能により埋められたとき。

加えて，これらのうち最初の 2 つに因り `reveal-icon$pe が除去された場合、［ `reveal-icon^pe が再び現れるようになるためには， 利用者が当の~fieldを成す内容を削除する必要がある ］ようにする。 この挙動は、 ~~放置されている機器~上で誰かが［ ~field内容に小さな変更を為して， `reveal-icon^pe を公開させる ］ことを防止する。

◎ Example mitigations to avoid unintentionally revealing sensitive text input: • If focus moves away from the field, remove the ::reveal-icon. • If script modifies field content, remove the ::reveal-icon. • If the ::reveal-icon is removed due to either of the above, the user must delete the contents of the field to make the ::reveal-icon appear again. This behavior prevents someone from making a minor change to field content to expose the ::reveal-icon on an unattended device. • If the field is filled by a user agent autofill feature, remove the ::reveal-icon.

`clear-icon@pe

この疑似要素は、 当の要素を成す［ ~clickされたとき，当の要素の値を~clearすることを利用者に許容する部位 ］を表現する — ~UAが，そのような部位を供するならば。 ◎ The ::clear-icon pseudo-element represents the portion of the input that allows the user to clear the input when clicked if provided by the user agent.

`appearance$p が `textfield^v をとる下では、 ~UAは，この部分を生成しないモノトスル。 ◎ With appearance: textfield, the user agent must not generate this part.

［ `field-text$pe, `reveal-icon$pe, `clear-icon$pe ］は、 互いに同胞になるモノトスル。 ◎ ::field-text, ::reveal-icon, and ::clear-icon must be siblings.

~autofillにより利用される各部†を収集する。 ◎ Collect parts used by autofill.

【† おそらく、 `HTML$r の`~autofill~keyword＠~HTMLautofill#autofill-field$にて述べられる “下位~部分” に対応する各部を指す。 】

`placeholder^pe と `field-text^pe がどう相互作用するかを定義する。 `11844$issue ◎ Define how ::placeholder interacts with ::field-text. [Issue #11844]

4.6. `textarea^e 用の各部の~style法： `placeholder^pe, `field-text^pe 疑似要素

`textarea$e 要素においては： ◎ ↓

`placeholder$pe

この疑似要素は、 当の要素を成す［ 仮入力~textを包含する部位 ］を表現する。 ◎ The ::placeholder pseudo-element represents the portion of the textarea that contains the placeholder text.

`field-text$pe

この疑似要素は、 当の要素を成す［ 編集-可能な~textを包含する部位 ］を表現する。 ◎ The ::field-text pseudo-element represents the portion of the textarea that contains the editable text.

~resize器~用の何かを定義する。 `11850$issue ◎ Define something for the resizer. [Issue #11850]

`placeholder^pe と `field-text^pe がどう相互作用するか定義する。 `11844$issue ◎ Define how ::placeholder interacts with ::field-text. [Issue #11844]

4.7. 数値~field用の各部の~style法： `step-control^pe, `step-up^pe, `step-down^pe 疑似要素

次に挙げる疑似要素は、 数値~入力~用に供される。 いずれも，`全部的に~style可能な疑似要素$である。 ◎ These pseudo-elements are provided for number inputs. They are fully styleable pseudo-elements.

`step-control@pe

この疑似要素は、 数値~入力を成す［ 増~button, 減~buttonを包含する部位 ］を表現する。 ◎ The ::step-control pseudo-element represents the portion of a number input that contains the up and down buttons.

`step-up@pe

この疑似要素は、［ 作動化されたとき，数値~入力の内側にある値を増分する~button ］を表現する。 ◎ The ::step-up pseudo-element represents the button that increments the value inside a number input when activated.

`step-down@pe

この疑似要素は、［ 作動化されたとき，数値~入力の内側にある値を減分する~button ］を表現する。 ◎ The ::step-down pseudo-element represents the button that decrements the value inside a number input when activated.

その構造は、 次に従うものと定義される： ◎ Their structure is defined as follows:

<input type="number">

+ %現在の値 -
◎
[ + 2 - ]

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

`appearance$p が `textfield^v をとる場合、 ~UAは，この部分を生成しないモノトスル。 ◎ With appearance: textfield, the user agent must not generate this part.

4.8. 日時~入力~field用の各部の~style法： `field-component^pe, `field-separator^pe 疑似要素

`field-component@pe

この疑似要素は、 当の~controlを成す［ 日時を成す各~成分の値を包含する部位 ］を表現する。 ◎ The ::field-component pseudo-element represents the portions of the control that contain the date/time component values.

`field-separator@pe

この疑似要素は、 当の~controlを成す［ 日時を成す各~成分どうしを分離する部位 ］を表現する — ~UAが，そのような部位を供するならば。 ◎ The ::field-separator pseudo-element represents the portions of the control that separate the date/time component values if the user agent provides those portions.

これらの疑似要素は、 互いに同胞である。 当の~controlを成す正確な構造は、［ 国際-化, ~host言語 ］により決定されるが， 各~UAにまたがって一貫するモノトスル。 ◎ Those pseudo-elements are siblings. The exact structure of the control is determined by internationalization and by the host language, but must be consistent across user-agents.

<input type="date">

08 / 22 / 2024 [v]
◎
[ 08 / 22 / 2024 [v]]

4.9. 色見本： `color-swatch^pe 疑似要素

`color-swatch@pe 疑似要素は、 当の~controlを成す［ 選ばれた色~値を表示する部位 ］を表現する。 ◎ The ::color-swatch pseudo-element represents the portion of the control that displays the chosen color value.

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

4.10. ~vendor疑似要素~拡張との互換性

~UAは、 標準でない疑似要素を： ◎ ↓

• アリなときは、 別名-法を利用して実装するベキである。 ◎ When possible, the user agent should use aliasing to implement any non-standard pseudo-elements.
• アリでないときは、 `appearance$p の値に応じて ⇒＃ `base^v 用には標準な疑似要素を予約するモノトスル。 `none^v 用には標準でない疑似要素を利用するモノトスル。 ◎ When not possible, the user agent must reserve the standard pseudo-elements for appearance: base and use any non-standard ones for appearance: none.

5.1. 各種 `meter^e 状態の~target法： `low-value^ps, `high-value^ps, `optimal-value^ps 疑似類

これが~UA~logicを~~再現可能になることを~~確保する。 `11336$issue ◎ Make sure this is able to replicate UA logic. [Issue #11336]

これらを~HTMLの定義へ~linkする。 ◎ Link these to the HTML definitions.

`low-value@ps 疑似類は、 次を満たす `meter$e 要素に合致する ⇒ その値は `low$a 内容~属性に指定された値を下回る ◎ The :low-value pseudo-class matches on a meter element when its value is under the value specified by the low HTML attribute.

`high-value@ps 疑似類は、 次を満たす `meter$e 要素に合致する ⇒ その値は `high$a 内容~属性に指定された値を上回る ◎ The :high-value pseudo-class matches on a meter element when its value is over the value specified by the high HTML attribute.

`optimal-value@ps 疑似類は、 次を満たす `meter$e 要素に合致する ⇒ その値は［ `optimum$a, `low$a, `high$a ］内容~属性により決定される範囲【~HTMLにて述べられる “最適~域” 】内にある ◎ The :optimal-value pseudo-class matches on a meter element when its value is in the range determined by the optimum / low / high HTML attributes.

5.2. ~listboxである `select^e の~target法

何かを定義する。 `7422$issue ◎ Define something. [Issue #7422]

7.1. ~widgetの~accent色： `accent-color^p ~prop

`accent-color$p ~propは、 `CSS-UI-4$r にて定義される。 ◎ The accent-color property is defined in [CSS-UI-4].

7.2. ~form~controlの~sizingの切替法： `field-sizing^p ~prop

この仕様の目的において、 要素が `既定の選好d~sizeを伴う要素@ であるとは， 要素の`内在的~size$は，要素の内容の~sizeに関わらず固定的であることをいう。 どの要素に適用-可能になるかは、 ~host言語が定義する。 例えば，~HTMLにおいては、 `textarea$e が`既定の選好d~sizeを伴う要素$であるとされる†。 ◎ For the purpose of this specification, an element with default preferred size is an element whose intrinsic size is fixed regardless of the size of its content. The host language defines which elements are applicable to it. For example, in HTML textarea is an element with default preferred size.

【† `textarea^e 要素の事例では、 “既定の選好d~size” は，要素の［ `cols^a, `rows^a ］属性に基づいて決定される。 】

`fixed@v

~UAは、 次に従うモノトスル： ◎ ↓

• 当の要素が`既定の選好d~sizeを伴う要素$である場合、 その`内在的~size$を［ ~host言語により当の要素~用に定義された既定の選好d~size ］に設定する。 ◎ For element with default preferred size, the UA must set the intrinsic size to the default preferred size defined by the host language for that element.＼
• 他の場合、 `content$v と同じに挙動する。 ◎ Otherwise, the UA must behave the same as content.

`content@v

~UAは、 次に従うモノトスル： ◎ ↓

• 当の要素の`内在的~size$を要素の内容に基づいて決定する — ~host言語が当の要素~用に既定の選好d~sizeを定義していても，無視する。 ◎ The UA must determine the element’s intrinsic size based on its content, and must ignore any default preferred size defined by the host language for that element.＼
• 当の要素が`既定の選好d~sizeを伴う要素$であって， `CSS-SIZING-3$r `§ 圧縮-可能な置換される要素＠~SIZING#min-content-zero$ に挙げられたものである場合、 要素を［ `最小-内容 供与$用には`置換d要素$として扱うこと ］を止める。 ◎ If the element is an element with default preferred size and is listed in compressible replaced elements, the UA must stop treating the element as a replaced element for min-content contribution.

7.3. `~sliderの様な~control$の方位の変更-法： `slider-orientation^p

この~propを作業し直す。 ◎ Rework this property.

`~sliderの様な~control$は、 この~propの値に応じて：

`auto@v

その方位は、 `書字~mode$と書字~方向により定義される。 ◎ The slider-like control orientation is defined by the writing mode and direction.

`left-to-right@v

横方向に具現化され， `slider-fill$pe は当の~controlの中で左端へ整列される。 ◎ The slider-like control is rendered horizontally and ::slider-fill is left-aligned within the control.

`right-to-left@v

横方向に具現化され， `slider-fill$pe は当の~controlの中で右端へ整列される。 ◎ The slider-like control is rendered horizontally and ::slider-fill is right-aligned within the control.

`top-to-bottom@v

縦方向に具現化され， `slider-fill$pe は当の~controlの中は上端へ整列される。 ◎ The slider-like control is rendered vertically and ::slider-fill is top-aligned within the control.

`bottom-to-top@v

縦方向に具現化され， `slider-fill$pe は当の~controlの中で下端へ整列される。 ◎ The slider-like control is rendered vertically and ::slider-fill is bottom-aligned within the control.

7.4. 敏感な入力の隠蔽： `input-security^p ~prop

~CSS~WGは、［ この機能性を利用者に供することは重要である ］と予見するが，~CSSと~JSを介してそれを行うことは間違った~approachであり、 代わりに，~UAの中に組込まれるべきであることに合意した。 これは、［ 利用者が発見-可能かつ理解-可能になるよう，各~siteにて一貫して働く ］必要があり, ［ ~JSが切られていようが働く ］必要があり, ［ 一貫して確固たる~accessibilityを備える ］必要があり, 等々。 したがって、 これは，仕様から除去されることが意図される — その挙動は、 代わりに［ ~password~fieldのヤリトリ~modelの一部として，~HTML仕様にて指定される ］ものと~~期待されている。 ~HTMLが明確化される状況まで、 削除するのは保留されるが。 `6788$issue, `~HTML課題 #7293＠~HTMLissue/7293$ を見よ。 ◎ The CSSWG has agreed that while we believe that providing this piece of functionality to users is important, doing it via CSS+JS is the wrong approach, and that instead it should be built into user agents: this needs to work consistently from site to site for it to be discoverable and understandable by users, this needs to work even when JS is turned off, and this needs to have consistently solid accessibility… We therefore intend to remove this from the specification, and instead, we would like to see this behavior specified in the HTML specification as part of the interaction model of password fields. Holding off deleting until the situation with HTML is clarified. See https://github.com/w3c/csswg-drafts/issues/6788 and https://github.com/whatwg/html/issues/7293.

この仕様の目的における `敏感な~text入力@ とは、 ~text入力のうち［ ~host言語により，敏感な入力を受容することが目的であると定義されたもの ］である。 例えば，~HTMLにおける `input type=password＠~HEinput#attr-input-type-password-keyword$e は、 `敏感な~text入力$である。 ◎ For the purpose of this specification, a sensitive text input is a text input whose purpose is to accept sensitive input, as defined by the host language. For example, in HTML <input type=password> is a sensitive text input.

~UAは、 既定では，覗き見を防止するために`敏感な~text入力$の内容を隠蔽する。 利用者は、 敏感な情報を自身が正しく打込んだか確認するために， この隠蔽を一時的に不能化したいと望むこともある。 作者は、 この隠蔽を［ 可能化する／不能化する ］ために `input-security$p ~propを利用してもヨイ。 ◎ By default, user agents obscure the contents of sensitive text inputs in order to prevent onlookers from seeing it. Users may wish to temporarily disable this obscuring in order to confirm that they’ve typed their sensitive information correctly. The input-security property may be used by authors to enable or disable this obscuring.

`none@v

~UAは、 当の~control内の~textを［ 利用者が読取れるよう，隠蔽しない ］モノトスル。 ◎ The UA must not obscure the text in the control, so that it can be read by the user.

`~auto0@v

~UAは、 当の~control内の~textを［ 利用者が読取れないよう，隠蔽する ］ベキである。 ◎ The UA should obscure the text in the control, so that it cannot be read by the user.

~UAが~control内の~textを隠蔽する正確な仕組みは未定義であるが、 ~UAは概して，`敏感な~text入力$を［ それを成す各~文字を相応しい何か — `002A^U `ASTERISK^cn (*) や `25CF^U `BLACK CIRCLE^cn (●) など — に置換する ］ことにより隠蔽する。 ◎ While the exact mechanism by which user agents obscure the text in the control is undefined, user agents typically obscure sensitive text inputs by replacing each character with some suitable replacement such as U+002A ASTERISK (*) or U+25CF BLACK CIRCLE (●).

input[type=password] {
  input-security: auto;
}

<input type=password value=MySecret794>

基本的なもの

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

~layout

input:not([type=file], [type=range], [type=checkbox][switch]),
textarea,
button,
::file-selector-button,
::slider-track,
select {
  `border$p: 1px solid currentColor;
  `background-color$p: transparent;
}

~slider

次に挙げるものの~style法を精緻化する ⇒＃ `meter$e, `progress$e, `input type=checkbox switch^e, `input type=range^e ◎ Refine meter, progress, switch and range input styling.

::slider-track {
  `height$p: 1em;
}

::slider-fill {
  `height$p: 100%;
  `background-color$p: currentColor;
}

:indeterminate::slider-fill {
  `inline-size$p: 0;
}

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

~checkboxと~radio

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

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

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

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

~button, ~buttonの様な~control

`select^e が~buttonの様になるのは、 `~drop-down~box$であるときに限られる。 ◎ Selects are only button-like when they’re a drop-down box.

button,
::file-selector-button,
select,
input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) {
  `border$p: 1px solid currentColor;
  `background-color$p: transparent;
  `color$p: inherit;
  /* 
~paddingは、
~textが~borderへ突き当たることを防止する。
【 `padding-block^p は、】
外見的に`半-~leading$を織り込むよう中央に寄せる。
◎
Padding prevents the text from sticking to the borders.
* optically centered to account for half leading
 */
  `padding-block$p: 0.25em;
  `padding-inline$p: 0.5em;

  /* 
［
`select$e, `button$e
］の `border-radius^p は、
`input^e のそれとは別個になるべきである。
[`10857＠~CSSissue/10857#issuecomment-2520875011$issue]
◎
<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$p: 0.5em;

  /* 
これらの最小-~size規則は、
`~WCAG規則＠https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html$
に従うことにより，~accessibilityを確保する。
`1lh^v は、
`option$e が~textを伴わない場合でも，
`button$e の塊~sizeを変更しないことを~~確保するためにある。
◎
These min-size rules ensure accessibility by following WCAG rules:
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
* The 1lh is there to make sure that options without text don't change
* the block size of the button.
 */
  `min-block-size$p: calc-size(auto, max(size, 24px, 1lh));
  `min-inline-size$p: calc-size(auto, max(size, 24px));

  /* 
`box-sizing^p は、
既存の~UA~styleから来る
— それは、
すでに相互運用可能である。
◎
box-sizing comes from existing UA styles which happen to already be interoperable.
 */
  `box-sizing$p: border-box;

  /* 
~picker~iconを~boxの右端へ追いやって，
~iconと~textの合間に空間を与える。
◎
Push picker icon to the right of the box and have some space
* in between it and the text.
 */
  `display$p: inline-flex;
  `gap$p: 0.5em;

  `user-select$p: none;

  `text-transform$p: initial;
  `text-align$p: initial;
  `text-indent$p: initial;
}
:is(button, select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):enabled:hover,
:enabled::file-selector-button:hover {
  `background-color$p: 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$p: 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$p: color-mix(in srgb, currentColor 50%, transparent);
}

`select^e 要素

select option {
  /* 
これらの最小-~size規則は、
`~WCAG規則＠https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html$
に従うことにより，~accessibilityを確保する。
作者が子 `button^e 要素を供する場合は，未設定にする。
`1lh^v は、
~textを伴わない `option$e が自身の塊~sizeを変更しないことを~~確保するためにある。
◎
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$p: 24px;
  `min-block-size$p: max(24px, 1lh);

  /* 
塊の中の~textを（縦方向に）中央に寄せる
（`~OpenUIの論点＠https://github.com/openui/open-ui/issues/1026#issuecomment-2103187647$）。
◎
Centers text within the block (vertically). From OpenUI discussion:
* https://github.com/openui/open-ui/issues/1026#issuecomment-2103187647.
 */
  `align-content$p: center;

  /* 
中央~寄せに加え，
~checkmarkと `option$e 内容の合間に~gapを与える。
~checkmarkが行内-終端に来るべきときでも，容易に逆順になる。
◎
centering + gap between checkmark and option content
also easily reversed, when checkmark should be inline-end
 */
  `display$p: flex;
  `align-items$p: center;
  `gap$p: 0.5em;

  /* 
`option$e が長い~textを伴うときでも、
高さを変えずに，~pickerの幅を広くする。
◎
Makes options with long text widen picker instead
* of making options tall.
 */
  `white-space$p: nowrap;
}
select option:enabled:hover {
  `background-color$p: color-mix(in lab, currentColor 10%, transparent);
}
select option:enabled:active {
  `background-color$p: color-mix(in lab, currentColor 20%, transparent);
}
select option:disabled {
  `color$p: color-mix(in lab, currentColor 50%, transparent);
}
select option::checkmark {
  `content$p: '\2713' / ''; /* 【
"✓" と空な代替~text
】 */
}
select option:not(:checked)::checkmark {
  `visibility$p: hidden;
}

select optgroup {
  /* 
`font-weight^p は、
`optgroup$e を `option$e とは視覚的に別物にする。
◎
font-weight makes optgroups visually distinct from options.
 */
  `font-weight$p: bolder;
}

select optgroup option {
  /* 
上で `optgroup^e に設定した `font-weight^p を【継承しないよう】元へ戻す。
◎
Undo font-weight:bolder rule from optgroups.
 */
  `font-weight$p: normal;
}

select legend,
select option {
  /* 
空間~法の所有権を子へ移動する。
行内~内容と左右~border辺の合間に空間を入れる。
これは、
~hover時における強調が全部的に行き渡るようにする。
◎
spacing ownership moves to children
* space inline from border edges
* this creates a full bleed hover
 */
  `padding-inline$p: 0.5em;
}

select {
  `field-sizing$p: content !important;
}

select > button:first-child {
  /* 
`button$e が［
`font^p ／ `color^p ／ `background-color^p
］を設定することを防止する。
◎
Prevents button from setting font, color, or background-color
 */
  `all$p: unset;

  /* 
重複な~box装飾を防止する。
◎
Prevents duplicate box decorations
 */
  `display$p: contents;

  /* 
`select$e が~eventを取扱えるよう，
`button^e 作動化の挙動を防止する。
◎
Prevents button activation behavior so select can handle events
 */
  `interactivity$p: inert !important;
}

select::picker-icon {
  /* 
`margin-inline-start^p は、
~iconを~boxの右端へ追いやる。
◎
margin-inline-start pushes the icon to the right of the box
 */
  `margin-inline-start$p: auto;
  `display$p: block;
  `content$p: counter(-ua-disclosure-open, disclosure-open);
}

::picker(select) {
  /* 
`~popover要素$や `dialog$e 要素~用の~UA~styleと同じ~propたち
◎
Same properties as popover and dialog
 */
  `color$p: CanvasText;
  `background-color$p: Canvas;
  `border$p: 1px solid;

  /* 
`box-sizing^p は、
当の~button【の`~border~box$】に合致するよう設定される。
◎
box-sizing is set to match the button.
 */
  `box-sizing$p: border-box;

  /* 
`~popover要素$の~paddingを除去する
— `option$e が辺へ拡がることを防止するよう。
◎
Remove [popover] padding which
* prevents options from extending to edges
 */
  `padding$p: 0;

  /* 
`~anchor位置決め$と~scrollbar
◎
Anchor positioning and scrollbars
 */
  `inset$p: auto;
  `margin$p: 0;
  `min-inline-size$p: anchor-size(self-inline);
  `min-block-size$p: 1lh;
  /* 
表示域の辺へ寄せる。
必要なら，~scrollbarを追加する。
◎
Go to the edge of the viewport, and add scrollbars if needed.
 */
  `max-block-size$p: stretch;
  `overflow$p: auto;

  /* 
既定では、
~anchor（`~anchor~box$, 以下同様）の下, かつ~anchorから右へ~spanする。
◎
Below and span-right, by default.
 */
  `position-area$p: block-end span-inline-end;
  `position-try-order$p: most-block-size;
  `position-try-fallbacks$p:
    /* 
まずは，~anchorの上, かつ~anchorから右へ~spanするよう試行する。
◎
First try above and span-right.
 */
    block-start span-inline-end,
    /* 
次に，~anchorの下, かつ~anchorから左へ。
◎
Then below but span-left.
 */
    block-end span-inline-start,
    /* 
次に，~anchorの上, かつ~anchorから左へ。
◎
Then above and span-left.
 */
    block-start span-inline-start;
}

select {
  `overflow$p: auto;
  `display$p: inline-block;
  `block-size$p: calc(max(24px, 1lh) * attr(size type(<integer>), 4));
}