Skip to content
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.

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

Allow to style ::-ms-reveal for the input of md-outlined-text-field #5728

Open
hviranicitco opened this issue Oct 8, 2024 · 4 comments
Open

Comments

@hviranicitco
Copy link

hviranicitco commented Oct 8, 2024

Description

Currently we have implemented our own password reveal icon using md-outlined-text-field along with md-icon-button.

Microsoft edge however adds it's own reveal icon as mentioned in https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal

This is how it looks on edge
image

To remove this , it mentions to add

::-ms-reveal {
    display: none;
}

However, I cannot add this style to the input since the input is within the component

Do we have any way to add this style which I did not realize? If not, can we add this feature to add this style somehow?

@asyncLiz
Copy link
Collaborator

asyncLiz commented Oct 8, 2024

We can add a display: none style for ::-ms-reveal in this section of text field's styles, where we turn off some other built-in <input> ui elements.

Do you mind creating a PR to update that?

@austinw-fineart
Copy link

Shouldn't that be an optional toggle? Some of us actually prefer using the browser's controls...

@asyncLiz
Copy link
Collaborator

asyncLiz commented Oct 9, 2024

The built-in icon doesn't match Material, and our text field has a spot for Material icons to be added to it.

hamidvirani pushed a commit to hamidvirani/material-web that referenced this issue Oct 10, 2024
* Hides built-in reveal icon on MS Edge.
hamidvirani added a commit to hamidvirani/material-web that referenced this issue Oct 10, 2024
* Hides built-in reveal icon on MS Edge.
@hamidvirani
Copy link

Created a PR to fix this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants