material-components / material-components/material-web

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

Open
#5,728 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Description

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?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names md-outlined-text-field and the ::-ms-reveal CSS rule; start by inspecting how the component exposes styling for its internal input and verify the behavior in Microsoft Edge. Done means consumers can suppress the browser reveal icon through a supported styling path.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.