title: transparent png not rendering as transparent?
body: <p>I saved the image as a transparent png but nothing I can do seems to fix it!?!  Any ideas???</p>
  
  <p><a href="https://i.stack.imgur.com/bBbjb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bBbjb.png" alt="enter image description here"></a></p>
  
  <p>It should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/eh25R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eh25R.png" alt="enter image description here"></a></p>
  
  <p>Here is a copy of the image in GIMP showing that it's indeed transparent:</p>
  
  <p><a href="https://i.stack.imgur.com/Bc4MO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bc4MO.png" alt="enter image description here"></a></p>
  
  <p>finally, Some good old code:</p>
  
  <p>The Markup:</p>
  
  <pre><code>&lt;form class="search" action="search.php"&gt;&lt;input class="search" type="text" name="search" id="searchbox"/&gt;&lt;/form&gt;
  </code></pre>
  
  <p>Search Box CSS:</p>
  
  <pre><code>.search, .search:active, .search:focus, .search:visited {
      position: absolute;
      color: #fff;
      top: 3px;
      width: 368px;
      right: 9%;
      font-size: 28px;
      z-index: 3;
      border-radius: 20px;
      /* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
      text-indent: 10px;
      text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
      background-color: #00D4C7;
  }
  </code></pre>
  
  <p>The Search icon css itself:</p>
  
  <pre><code>Pseudo ::before element
  .search:before {
      content: "";
      position: absolute;
      top: 7px;
      left: 268px;
      background-image: url("images/icon-search.png");
      background-color: rgb(0, 185, 171);
      width: 46px;
      height: 30px;
      z-index: 4;
  }
  </code></pre>
  
  <p><strong>Note:</strong>  If I remove the class search from form, It removes my image, if I remove class search from the input element it still renders with that funky shade over my image...Any ideas?</p>
  
  <p><strong>Edit 1:</strong>  If I do as suggested by setting the explicit dimensions of the image (as I did for other pseudo elements with no problem) it does not resolve my issue.  I've already submitted the project so at this point it's a matter of me wanting to know what happened and how I can fix this.  I resorted to a css hack that changed the brightness to a closer match [with a faint outline still  ]</p>
  
  <p><a href="https://i.stack.imgur.com/aPs8j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aPs8j.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit 2:</strong> Show me the <a href="https://jsfiddle.net/g490vove/1/" rel="nofollow noreferrer">JS Fiddle</a>!</p>