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

Question

I implemented a see password button for my password input using html and jquery so when I run it in Microsoft Edge and IE the browsers themselves have one button as default to see password for type=password inputs. and the result will be two see password button!

Now I have 3 solution I think!

1. Disable Edge and IE see password default button (How?)

2. Disable my see password Button in Edge and IE (How?)

3. Enable same option for chrome and Firefox (How?)

the third solution is the best i think. does chrome and Firefox have default see password button? If they have how can i use them?

Here is my code:

<input type="password" class="form-control" id="password" placeholder="password " name="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>

<script>
$('#show_password').hover(function functionName() {
    //Change the attribute to text
    $('#password').attr('type', 'text');
    $('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
}, function () {
    //Change the attribute back to password
    $('#password').attr('type', 'password');
    $('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
}
);
</script>

Solution 1

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>

Solution 2

For a pure css version you can use the IE10+ and edge pseudo-elment ::-ms-reveal

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

It also can be used to change the color or background