material-web icon indicating copy to clipboard operation
material-web copied to clipboard

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

Open hviranicitco opened this issue 1 year ago • 4 comments

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?

hviranicitco avatar Oct 08 '24 14:10 hviranicitco

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?

asyncliz avatar Oct 08 '24 23:10 asyncliz

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

austinw-fineart avatar Oct 09 '24 01:10 austinw-fineart

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

asyncliz avatar Oct 09 '24 15:10 asyncliz

Created a PR to fix this.

hamidvirani avatar Oct 10 '24 15:10 hamidvirani