title: CSS transparent background not working in IE7-8
body: <p>I'm slowly deleting a few small png files I used for transparent divs, and replacing them with CSS code.</p>
  
  <p>This CSS code works on FF and IE9-10, and it helps in styling a textbox (it also changes the background when you click on it and adds a red 1px border):</p>
  
  <pre><code>#searchbars input {
      width: 130px;
      border: 1px solid #FFF;
      padding: 4px 2px 2px 10px;
      font-size: .9em;
      font-family: Helvetica, Arial, sans-serif;
      height: 16px;
  
      /* Fallback for web browsers that doesn't support RGBa */
      background: rgb(22, 22, 22) transparent; /* #161616 /
      /* RGBa with 0.28 opacity */
      background: rgba(22, 22, 22, 0.28);
      color: #FFF;
  }
  
  #searchbars input:active,
  #searchbars input:focus {
      /* Fallback for web browsers that doesn't support RGBa */
      background: rgb(22, 22, 22) transparent; /* #161616 /
      /* RGBa with 0.75 opacity */
      background: rgba(22, 22, 22, 0.75); 
      border: 1px solid #ff8277;
  }
  </code></pre>
  
  <p>Here's the conditional stylesheet for IE7:</p>
  
  <pre><code>    /* For IE 5.5 - 7*/
      #searchbars input {
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616);
  }
  
  #searchbars input:active, #searchbars input:focus {
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616);
  }
  </code></pre>
  
  <p>IE8 conditional sheet:</p>
  
  <pre><code>    /* For IE 8*/
     #searchbars input {
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616)";
  }
  
  #searchbars input:active, #searchbars input:focus {
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616)";
  }
  </code></pre>
  
  <p>I used IE10 developer tool, and tried to render the page using IE7-8-9 engines.</p>
  
  <p>IE9/10/Firefox -> everything works as expected</p>
  
  <p>IE8 -> Default background and the background change when you click on the textbox (<code>input:focus</code>) are not the ones expected. It seems that opacity is not being applied even though the alpha hex values are correct.</p>
  
  <p>IE7 -> Default background works. Background change when you click on the textbox (<code>input:focus</code>) doesn't work. 
  Also, the textbox border doesn't turn red when you click on it (see <code>border: 1px solid #ff8277;</code> property from the original sheet)</p>
  
  <p>Here's a demo page: <a href="http://www.flapane.com/calcio.php" rel="nofollow">http://www.flapane.com/calcio.php</a></p>
  
  <p>The search box is in the upper right corner, right of the social sharing buttons.</p>
  
  <p>Any hints?</p>
  
  <p>Thanks in advance</p>