title: How to hide the eye from a password input in MS Edge and IE
body: <p>I now found an answer:
  It just works when I add <code>display: none !important;</code>. I dont know, what exactly is blocking the <code>display: none;</code> but if someone else has this error, try to add <code>!important</code> and check that the input is an password field.</p>
  <p><strong>Original Question:</strong></p>
  <p>I have a password input with a custom added &quot;show password&quot; button. Now I want to remove the password button which is added by MS Edge and IE.
  I already tried:</p>
  <pre class="lang-css prettyprint-override"><code>input[type=&quot;password&quot;]::-ms-reveal,
  input[type=&quot;password&quot;]::-ms-clear {
    display: none;
  }
  </code></pre>
  <p>and</p>
  <pre class="lang-css prettyprint-override"><code>input::-ms-reveal,
  input::-ms-clear {
    display: none;
  }
  </code></pre>
  <p>The <code>::ms-clear</code> is working and removes the little <code>x</code> where the user can clear the input. But the <code>::ms-reveal</code> isn't working. Tested in IE 11, MS Edge based on Chromium and newest MS Edge which isn't based on Chromium.</p>
  <p><a href="https://i.stack.imgur.com/E40av.png" rel="noreferrer">MS Edge, Chromium based</a>,
  <a href="https://i.stack.imgur.com/zIoeJ.png" rel="noreferrer">IE 11</a></p>
  <p>The eye on the right is my custom added eye, the other one is the eye added by IE or Edge.</p>
  <p>Here is my input styling:</p>
  <pre><code>/*
  BASIC INPUT STYLING
  */
  
  input, textarea, select {
      outline: none;
      border-radius: 6px;
      box-sizing: border-box;
      box-shadow: none;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      line-height: 1;
      font-size: 16px;
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      color: #222222;
      background-color: transparent;
      border: 1px solid #CCCCCC;
      padding: 18px 22.5px;
      transition: border-color .15s ease-in-out;
      width: 100%;
  }
  
  input:focus, textarea:focus, select:focus {
      border: 1px solid #999999;
  }
  
  .input-small input, .input-small select, .input-small textarea {
      font-size: 14px;
      padding: 9px 11.25px;
  }
  
  /*
  INPUT WITH ICON STYLING
  */
  
  .input-with-icon {
      position: relative;
  }
  
  .input-with-icon input, .input-with-icon select {
      padding-right: 62.5px;
  }
  
  .input-with-icon.input-small input, .input-with-icon.input-small select {
      padding-right: 32px;
  }
  
  .input-icon-div {
      height: 51px;
      border-radius: 6px;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      position: absolute;
      right: 5px;
      bottom: 2px;
      cursor: pointer;
  }
  
  .input-small .input-icon-div {
      font-size: 14px;
      height: 27px;
      width: 25px;
  }
  </code></pre>
  <p>and the HTML:</p>
  <pre><code>&lt;div class=&quot;input-with-icon&quot;&gt;
      &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; class=&quot;&quot; maxlength=&quot;255&quot;&gt;
      &lt;div class=&quot;input-icon-div&quot;&gt;
          &lt;i class=&quot;far fa-eye&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>