CSS

Hide Eye Icon From Password Input In MS Edge And IE 10 Using CSS

In this article, we will learn how to hide eye icon from password input in MS Edge and IE 10 using CSS.

While filling up a form, there comes a situation where user type a password and want to see what he/she have typed till now. In modern websites to see that, they provides a clickable eye icon on which the password can visible or invisible.

Where some browser such as Microsoft Edge and Internet Explore 10 provides inbuilt winking eye feature to show or hide entered password. So in that circumstance a user can have double winking eye icons such as given above.

To solve this issue we just have to add CSS as given below.

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

Above CSS will help to disable the browser’s default implementation of the winking eye.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        /* To hide IE10/MS Edge's implementation of the winking eye. */        ::-ms-reveal {
            display: none ;
        }
    </style>
</head>
<body>
    <input type="password" id="txtPassword" />
    <i class="fa fa-eye"></i>
</body>
</html>

Output:

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Infinity Audio/Video Duration Issue Fixed Using JavaScript

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.

View Comments

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago