Skip to content

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

New issue

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

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

Already on GitHub? # to your account

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.

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

No branches or pull requests

4 participants