Input boxes with transparent background are not clickable in IE8
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>
Answer
I am unable to reproduce such a problem in IE8. Full test case? Are you sure there's not a layering problem causing some other transparent element to cover the clickable area?
Does setting background-image make a difference? What about to a transparent GIF?
ETA: Curious! It's actually an IE7 bug. For me, your example exhibits the described behaviour in IE7, but in IE8 it's only when in EmulateIE7 mode; in IE8 native rendering it's fixed. You'll generally want to make sure you don't fall back to IE7 rendering by using a suitable X-UA-Compatible header/meta; however, yes, setting the background-image to a transparent GIF fixed the problem for me. Tsk, we still need the blank GIF even in this day and age, huh?