Removing the Clear and Reveal Password Icons from Internet Explorer

Internet Explorer 10 Windows 8 Remove Text Input and Password Action Icons

You need to use the -ms-clear pseudo-element. And use -ms-reveal for the password box.

This should do it:

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

How to hide the eye from a password input in MS Edge and IE

I tried to test your both codes on the IE 11, MS Edge legacy browser, MS Edge Chromium browser and Firefox.

It worked on my side and it is not showing the Reveal password button (Eye).

Tested code:

<!DOCTYPE html>
<html>
<head>
<style>
input::-ms-reveal,
input::-ms-clear {
display: none;
}
</style>
</head>
<body>
Password: <input type="password" value="" id="myInput" /><br /><br />
</body>
</html>

How to remove IE pseudo-element appearing on the right edge of a textbox with password type?

you can use :ms-reveal

.form-control::-ms-reveal {
display: none;
}

complete list of ie specific pseudo elements present in the following link, which will come in handy

https://msdn.microsoft.com/en-us/library/hh869604(v=vs.85).aspx

CSS3 selectors are not working to hide the password reveal icon in IE 11

IE 10 only supports hiding password reveal icon using CSS

input::-ms-clear, input::-ms-reveal {
display: none;
}

For IE 11, I found solution here , using javascript. Hope this help others.

How can I disable the clear button that IE10 inserts into textboxes?

input[type=text]::-ms-clear {
display: none;
}

Moving or configuring ::-ms-clear in Internet Explorer 10

UPDATE: As the other answerer pointed out, the MS documentation has been updated as June 19, 2013 to include all of the properties available to ::-ms-clear. It's unclear if this applies to IE10 rather than the currently forthcoming IE11, so I will leave the rest of the answer below.

For completeness, they have also updated the documentation for ::-ms-reveal, which appears to be the exact same as ::-ms-clear.

The answer below at least applies to IE10.


I cannot find an exhaustive list, which lead me to experimentation:

::-ms-clear {
margin: *; /* except margin-left */
background: *;
color: *;
display: none|block;
visibility: *;
}

Unfortunately, I was not able to trick IE's developer mode (F12) into showing me the ::-ms-clear properties in the style tree, so I had to try things by hand and reload the page in order to experiment. I even tried cheating by adding onblur=this.focus(), but that did not work.

CSS properties that did something, and seemed useful:

  • margin: The margin gave me a way to shift it from the right side of the textbox. I shifted it by the size of my icons, plus 1-3 pixels to give a buffer. Only margin-left does not seem to work.
  • background: The background of just the x. Applying any background settings puts your desired content behind it; it does not replace the x!
  • color: Controls the color of the x.
  • display: As the question that got me here notes, none will hide the x.
  • visibility: Seems to work as one would expect similar to display.

You can combine the color and background to replace the x with a different background image so long as it fits within the given size of the x, which appears to be around 20px, but that is just me eyeballing it.

::-ms-clear {
color: transparent;
background: no-repeat url("../path/to/image") center;
}

CSS properties that did something, but did not seem useful:

  • padding: It affects the x, but never as I actually expected its effect (everything seemed to hide the icon, or at least shift it out of view).
  • position: Identical behavior as padding. Admittedly, I am much more of a programmer than a designer, so this may be my own shortcoming.

CSS properties that I guessed might do something, but that did nothing at all:

  • text-align
  • float

Adding other CSS pseudo-elements does not affect ::-ms-clear. Specifically, I tried ::after and ::before on it with content: "y", and neither one got a result.

Obviously it depends on the size of the companion icon that you intend to apply to the textbox, but I use 14-16px icons and I found that margin-right: 17px gave the x a clear gap, which shifts the x to the left of my right-aligned icon. Interestingly, margin-left seems to have no effect, but you can use a negative value for margin-right.

The actual CSS that I ended up using, which prevented my icon from being covered by the x.

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
margin-right: 17px;
}

My icons all share the same base name, tbc-icon-, which means that the ::-ms-clear pseudo-element is automatically applied to all of them whenever they are applied. In all other cases, the pseudo-element behaves in its default manner.

Of interest, ::-ms-reveal seems to behave the same way, and if you were going to apply icons to password fields (far less likely I expect), then you can follow the above example:

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
margin-right: 17px;
}

How to add see password icon just for chrome and Firefox?

Just use position:absolute for view button.

div {

position: relative;

display: inline-block;

}

input {

padding-right: 2.4em;

height: 2em;

}

input::-ms-reveal {

display: none;

}

span {

position: absolute;

right: 1px;

top: 50%;

transform: translateY(-50%);

z-index: 100;

}

span svg {

background-color: white;

display: block;

padding: .2em;

width: 1.3em;

height: 1.3em;

}
<div>

<input type="password">

<span>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 3c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z"/></svg>

</span>

</div>


Related Topics



Leave a reply



Submit