transparent png not rendering as transparent?
<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>