[csswg-drafts] [selectors-4] Password reveal psuedo element and class (#3934)

gregwhitworth has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors-4] Password reveal psuedo element and class ==
Hey everyone,

We've posted an [explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/PasswordReveal/explainer.md) on our public site regarding a proposal to add an optional psuedo element to the `<input type="password">` as well as a `:revealed` psuedo class. The explainer delves into the user and web research we've done as well as telemetry we've added that support the addition of this element and class.

The proposal is as follows (copied from the explainer for ease of discussion):

## Proposal:

The goal of our below proposal is to enable two key aspects:

* Allow user agents to include this functionality if they wish
* Enable web developers an ability to style it beyond color modifications

This proposal is to include this as part of CSS Selectors Level 4 with the addition of the following specification text:

### The ::reveal pseudo-element

User agents may implement the reveal pseudo-element on inputs that have `type=password`. If the user agent does implement this pseudo-element the following rules must be followed:

#### Toggling between revealed and obscured

* Activating the pseudo-element reveals the obscured password in plain text.
* Activating the pseudo-element again returns the password to being obscured.

#### Allowing for ease of author adjustment

* The graphic, text or other visual represenation the user agent utilizes to inform the user that they can interact with it must be set as a background image to allow authors to easily utilize the functionality but adjust this representation to meet their design needs if necessary.

#### Showing, hiding password reveal element, obscuring the password

Following events would show a password reveal element:

* User is typing password into an initially empty password input

Following events would prevent password reveal element from appearing: 

  * An empty password input has been focused
  * Password input is pre-filled programmatically
  * User has typed the password, and then the password input has lost focus

Following events would obscure password and hide a reveal element:

 * Password input has lost focus

 This is important because even though the user may find value in being able to see their password, they may only desire for it to be visible for a short amount of time and doing this allows for keeping the password private even if the user forgets to invoke the `::reveal` psuedo-element. Additionally, when the browser itself loses focus the password is obscured as well.

#### Supported styles

Only the following CSS properties can be applied:

* background-clip
* background-color
* background-image
* background-origin
* background-repeat
* background-size
* border-bottom-color
* border-bottom-left-radius
* border-bottom-right-radius
* border-bottom-style
* border-bottom-width
* border-left-color
* border-left-style
* border-left-width
* border-right-color
* border-right-style
* border-right-width
* border-top-color
* border-top-left-radius
* border-top-right-radius
* border-top-style
* border-top-width
* box-shadow
* box-sizing
* cursor
* display (values block, none)
* font-size
* height
* margin-bottom
* margin-left
* margin-right
* margin-top
* opacity
* outline-color
* outline-style
* outline-width
* padding-bottom
* padding-left
* padding-right
* padding-top
* transform
* transform-origin
* width

### The :revealed pseudo-class

User agents that implement the `::reveal` pseudo-element must also implement the `:revealed` pseudo-class on the password input. When a user invokes the `::reveal` pseudo-element the pseudo-class should be applied to the password element.
This will allow authors to provide different styles when the password is either revealed or not.

**Example**

Here is an example of an author that wants to show an eye image to reveal and a closed eye image to hide the password again.

    <input type="password" />
    <style>
    input[type=password]:revealed::reveal {
        background-image: url(my-eye-image.png);
    }
    input[type=password]:revealed::reveal {
        background-image: url(my-eye-image-revealed.png);
    }
    </style>


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3934 using your GitHub account

Received on Wednesday, 15 May 2019 03:59:02 UTC