Skip to content

Define native appearance and primitive appearance for text inputs #12170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ChaseKnowlden wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Define native appearance and primitive appearance for text inputs #12170

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 77 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3932,6 +3932,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#picker-pseudo">'::picker'</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#checkmark">'::checkmark'</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-picker-icon">'::picker-icon'</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-field-text">'::field-text'</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-placeholder">'::placeholder'</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-reveal-icon">'::reveal-icon'</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-clear-icon">'::clear-icon'</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-forms/#typedef-picker-form-control-identifier">picker form control identifier</dfn></li>
</ul>

Expand Down Expand Up @@ -147683,11 +147687,82 @@ details[open] > summary:first-of-type {
containers</span> and support scrolling in the <span>inline axis</span>, but not the <span>block
axis</span>.</p>

<p class="XXX">Need to detail the <span>native appearance</span> and <span>primitive
appearance</span>.</p>
<p>These text controls support a <span>base appearance</span> in addition to <span>native
appearance</span> and <span>primitive appearance</span>.</p>

<div algorithm>
<p>When one of these text controls is being rendered with <span>base appearance</span>, it is
<span>expected</span> to render with a <span>shadow tree</span> that contains the following
elements:</p>

<ol>
<li><p>A <dfn>text input placeholder</dfn>, which is an element that is <span>expected</span>
to match the <span>'::placeholder'</span> pseudo-element. It contains the text of the <code
data-x="attr-input-placeholder">placeholder</code> attribute, if any. It is
<span>expected</span> to be displayed when the element's <span
data-x="concept-fe-value">value</span> is the empty string, and hidden
otherwise.</p></li>

<li><p>A <dfn>text input field text</dfn>, which is an element that is <span>expected</span>
to match the <span>'::field-text'</span> pseudo-element. It contains the element's <span
data-x="concept-fe-value">value</span>, rendered according to the element's type (obscured for
<span data-x="attr-input-type-password">Password</span> state, as regular text
otherwise).</p></li>

<li><p>Optionally, a <dfn>text input clear icon</dfn>, which is an element that is
<span>expected</span> to match the <span>'::clear-icon'</span> pseudo-element. When activated,
it clears the element's <span data-x="concept-fe-value">value</span>. If the <span>computed
value</span> of the element's <span>'appearance'</span> property is <code>'textfield'</code>,
this element must not be generated.</p></li>

<li><p>For <code>input</code> elements whose <code data-x="attr-input-type">type</code>
attribute is in the <span data-x="attr-input-type-password">Password</span> state, optionally a
<dfn>text input reveal icon</dfn>, which is an element that is <span>expected</span> to match
the <span>'::reveal-icon'</span> pseudo-element. When activated, it temporarily disables the
obscuring of the element's <span data-x="concept-fe-value">value</span>.</p></li>
</ol>

<p>The <span>text input field text</span>, the <span>text input clear icon</span> (if present),
and the <span>text input reveal icon</span> (if present) are <span>expected</span> to be
siblings.</p>
</div>

<p>When one of these text controls is being rendered with <span>native appearance</span> or
<span>primitive appearance</span>, the <span>'::field-text'</span>, <span>'::placeholder'</span>,
<span>'::clear-icon'</span>, and <span>'::reveal-icon'</span> pseudo-elements do not
apply.</p>

</div>

<p>The <span>primitive appearance</span> for these text controls is <span>expected</span> to be
that of an <span>'inline-block'</span> box with a 'border' of '1px solid' and a
<span>'background-color'</span> of 'transparent', sized according to the same sizing rules as the
<span>native appearance</span>.</p>

<p>The following styles are <span>expected</span> to apply to these text controls when they are
being rendered with <span>base appearance</span>:</p>

<pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";

input:is([type=text i], [type=search i], [type=tel i], [type=url i],
[type=email i], [type=password i], :not([type])) {
border: 1px solid currentColor;
background-color: transparent;
padding-block: 0.25em;
padding-inline: 0.5em;
box-sizing: border-box;
}

input:is([type=text i], [type=search i], [type=tel i], [type=url i],
[type=email i], [type=password i], :not([type]))::placeholder {
color: color-mix(in lab, currentColor 50%, transparent);
}

input:is([type=text i], [type=search i], [type=tel i], [type=url i],
[type=email i], [type=password i], :not([type])):disabled {
color: color-mix(in lab, currentColor 50%, transparent);
}</code></pre>


<div w-nodev>

Expand Down