Input boxes with transparent background are not clickable in IE8

Posted by Viliam on Stack Overflow See other posts from Stack Overflow or by Viliam
Published on 2010-01-20T02:39:18Z Indexed on 2010/04/29 5:17 UTC
Read the original article Hit count: 485

Filed under:

html

|

css

|

ie

|

ie8

|

inputbox

I have an absolutely positioned input box in a form. The input box has transparent background:

.form-page input[type="text"] {
        border: none;
        background-color: transparent;
        /* Other stuff: font-weight, font-size */
}

Surprisingly, I cannot select this input box by clicking on it in IE8. It works perfectly in Firefox however. The same happens for background: none. When I change the background color:

        background-color: red;

It works fine, so this is issue associated with transparent background. Setting a border makes the input box selectable by clicking on its border only.

Is there a workaround to have clickable input box with transparent background working in IE8?

Update: Example. Uncomment background-color and the inputbox is selectable. You can also click on the select box, and focus the input box by pressing Shift+Tab.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"] {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

Developer IT