title: How to add see password icon just for chrome and Firefox?
body: <p>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 <strong>type=password</strong> inputs. and the result will be two see password button! </p>
  
  <p><img src="https://i.stack.imgur.com/FtHRu.png" alt="as this image"></p>
  
  <p>Now I have 3 solution I think!</p>
  
  <p><strong>1. Disable Edge and IE see password default button (How?)</strong></p>
  
  <p><strong>2. Disable my see password Button in Edge and IE (How?)</strong></p>
  
  <p><strong>3. Enable same option for chrome and Firefox (How?)</strong></p>
  
  <p>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?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;input type="password" class="form-control" id="password" placeholder="password " name="password"&gt;
  &lt;span class="input-group-btn"&gt;
  &lt;button id="show_password" class="btn btn-secondary" type="button" style="padding:9px;"&gt;
  &lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;/span&gt;
  
  &lt;script&gt;
  $('#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');
  }
  );
  &lt;/script&gt;
  </code></pre>