Input boxes with transparent background are not clickable in IE8

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?

You have to define a (transparent) background image.

Just in case someone would be interested. One of suggested workarounds....

Please include the html for the input element.

How did you define the input element? The code below works in IE8 (IE 8.0.7600 Windows). I tried this in IE8 and was able to 'select' the input area just fine.

<html>

<head>

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

<body>

<input type="text" name="test" value="test" id="test"/>

</body>
</html>

Just give the input field a transparent background image and it will work...

Example:

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}

I've found the same issue using IE10 on Windows 7. Both of the following methods fixed the issue for me.

Franky's method using a transparent background image...

background:url(/images/transparent.gif);

Sketchfemme's method using an rgba background colour with '0' opacity

background-color:rgba(0,0,0,0);

Jim Jeffers suggestion for editing the z-index's did not work for me.

Input boxes with transparent background are not clickable in IE8

Related

Recent Posts