ansaurus

Question

Input boxes with transparent background are not clickable in IE8

Answer 1

+6 A:

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?

bobince 2010-01-20 02:55:57

Yep, I'm sure because enabling color would not change layers. Working on example.

Viliam 2010-01-20 03:05:13

Example included.

Viliam 2010-01-20 03:43:39

@Villiam [updated].

bobince 2010-01-20 13:29:13

Viliam's IE8 may be using Compatibility View automatically if the page is in the Intranet zone.

David Kolar 2010-01-20 13:46:32

Just wanted to add that this bug already exists in IE6

xor_eq 2010-07-21 12:42:55

Answer 2

+2 A:

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>

2010-01-20 02:57:13

Example included.

Viliam 2010-01-20 03:43:05

Answer 3

A:

It may seem strange but you should try explicitly specifying the z-index of the elements involved. This should force the input to render on top of the element with the background color/image applied to it.

Jim Jeffers 2010-01-20 04:24:46

Tried already, but with no success.

Viliam 2010-01-20 04:30:17

Are you able to provide a public link to the page?

Jim Jeffers 2010-01-21 01:33:54

Answer 4

A:

IE in its infinite wisdom is deciding not to render the item because it thinks there is nothing to render. There are numerous ways to address this but basically you'll need to give IE something to chew on.

Adding a 'value=x' to the input tag itself definitely works. But more than likely it's not the best solution. A simple, color:black (without the focus) allows the element to be tabbed to. Adding ':focus' to the input style allows the element to render.

Try this:

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

<style type="text/css">
  input[type="text"]:focus {
    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>

2010-01-20 04:38:40

Actually the item is rendered, since you can select it by pressing Tab. But clicks on it are ignored. I'll try the value='x', but it will add a text to it, something I don't want in general.

Viliam 2010-01-20 14:30:49

Answer 5

+1 A:

You have to define a (transparent) background image.

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

Viliam 2010-01-20 21:35:56

Answer 6

+1 A:

Here is a very simple test case:

<html>
    <head>
    </head>
    <body style="direction: ltr;">
        <br/><br/><br/>
        <INPUT style="WIDTH: 100%;" />

        <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
            <INPUT style="WIDTH: 100%; background-color: transparent;"/>
        </DIV>
    </body>
</html>

When running in IE8 - you should see the focus on the underlying textbox instead on the absolutely positioned textbox.

Our solution was to set both transparent background color and transparent background image:

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>

Amit

2010-04-29 05:14:51

Answer 7

A:

It seems though that even with the transparent gif trick, if you set background: transparent anywhere else in your CSS, for actual web browsers, it triggers the IE7 bug and you don't get a cursor on hover and can't easily click into the input box.

Crankypants 2010-06-24 23:30:32

Answer 8

A:

Definitely it's a bug from IE7 and IE8 ...

Shark Hermk 2010-09-29 23:30:14

ansaurus

tags:

views:

answers:

Input boxes with transparent background are not clickable in IE8

related questions