Input boxes with transparent background are not clickable in IE8

Question

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. ```

Accepted 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?

Input boxes with transparent background are not clickable in IE8

Solution

Problem