Skip to content

[css-forms-1] Add ::reveal-icon pseudo-element. #11845 #12821

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

Merged
merged 2 commits into from
Sep 18, 2025
Merged

[css-forms-1] Add ::reveal-icon pseudo-element. #11845 #12821

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f32a89f
[css-forms-1] Add ::reveal-icon pseudo-element. #11845
kbabbitt Jun 20, 2025
fa19597
Add missing colon
kbabbitt Sep 18, 2025
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
33 changes: 29 additions & 4 deletions css-forms-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
- <{input}> elements with `type="range"`
- <{input}> elements with `type="checkbox" switch`

## Styling Parts for Text Fields: the ''::field-text'' and ''::clear-icon'' pseudo-elements ## {#field-pseudos}
## Styling Parts for Text Fields: the ''::placeholder'', ''::field-text'', ''::reveal-icon'', and ''::clear-icon'' pseudo-elements ## {#field-pseudos}

<dl export>
<dt><dfn>::placeholder</dfn>
Expand All @@ -403,6 +403,32 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
The ''::field-text'' pseudo-element represents
the portion of the <{input}> that contains the editable text.

<dt><dfn>::reveal-icon</dfn>
<dd>
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.

User agents providing ''::reveal-icon'' may choose to
remove it in some circumstances to help protect [=sensitive text input=]
from being revealed unintentionally.

<div class=note>
Example mitigations to avoid unintentionally revealing [=sensitive text input=]:
<ul>
<li>If focus moves away from the field, remove the ''::reveal-icon''.</li>
<li>If script modifies field content, remove the ''::reveal-icon''.</li>
<li>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.</li>
<li>If the field is filled by a user agent autofill feature, remove
the ''::reveal-icon''.</li>
</ul>
</div>

<dt><dfn>::clear-icon</dfn>
<dd>
The ''::clear-icon'' pseudo-element represents
Expand All @@ -413,12 +439,10 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
With ''appearance: textfield'', the user agent must not generate this part.
</dl>

''::field-text'' and ''::clear-icon'' must be siblings.
''::field-text'', ''::reveal-icon'', and ''::clear-icon'' must be siblings.

ISSUE: Collect parts used by autofill.

ISSUE(11845): Define something for the password visibility toggle for user agents implementing it?

ISSUE(11844): Define how `::placeholder` interacts with `::field-text`.

## Styling Parts for textareas: the ''::placeholder'' and ''::field-text'' pseudo-elements ## {#textarea-pseudos}
Expand Down Expand Up @@ -1045,6 +1069,7 @@ select::picker-icon {
<li>Removed "Appendix B: Explorations" with obsolete ideas.</li>
<li>Added "slider-" prefix to slider pseudo-elements.</li>
<li>Moved 'field-sizing' and 'input-security' properties from css-ui-4.</li>
<li>Added the ''::reveal-icon'' pseudo-element.</li>
</ul>

<h2 class=no-num id=privacy>Privacy Considerations</h2>
Expand Down