Input boxes with transparent background are not clickable in IE8

S

14

49

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>

Suzettesuzi answered 20/1, 2010 at 2:39 Comment(1)

behavior confirmed in IE 9.0.8112 ... Wow IE. – Emblem 8/8, 2012 at 13:13

E

27

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?

Eno answered 20/1, 2010 at 2:55 Comment(4)

Yep, I'm sure because enabling color would not change layers. Working on example. – Suzettesuzi 20/1, 2010 at 3:5

Viliam's IE8 may be using Compatibility View automatically if the page is in the Intranet zone. – Fascist 20/1, 2010 at 13:46

I'm seeing this behavior in IE 8 Standards mode. I just gave up and used a background image. – Rodd 16/8, 2011 at 14:45

Instead of using a transparent gif you can just add: background-image:url(//) – Goblin 2/12, 2013 at 18:9

S

8

You have to define a (transparent) background image.

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

Suzettesuzi answered 20/1, 2010 at 21:35 Comment(0)

H

6

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>

Hepsibah answered 20/1, 2010 at 2:57 Comment(0)

G

6

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);}

Gony answered 1/12, 2010 at 8:33 Comment(0)

A

2

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');"/>

Addington answered 29/4, 2010 at 5:14 Comment(0)

M

2

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.

Monocot answered 25/2, 2014 at 12:11 Comment(0)

H

1

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">
<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>

Hepsibah answered 20/1, 2010 at 4:38 Comment(2)

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. – Suzettesuzi 20/1, 2010 at 14:30

@Viliam, Actually, I think the clicks are passed through to whatever is behind. I ran into this bug today on a button element (client finally upgraded from IE6 to IE8) and the clickable area was 1px wide. background:url(../images/clear.gif) in the CSS fixed (work-around) it. – Bring 8/11, 2011 at 6:11

S

1

As bobince observed, it's an IE7 bug. I've sometimes found it convenient to solve it by adding a value="       ". Use as many non-breaking spaces as required to make the clickable area big enough. Depending on your app, you might need to strip these later.

Sports answered 12/3, 2011 at 19:38 Comment(0)

E

1

 background-image:url(about:blank);background-color:transparent;

Efficient answered 17/2, 2014 at 3:43 Comment(2)

please explain your answer too. Thx – Swirsky 17/2, 2014 at 4:0

It's just need a background-image – Efficient 17/2, 2014 at 4:55

F

0

Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With the following doctype change the issue is fixed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Source : http://www.codingforums.com/showthread.php?p=1173375#post1173375

Force answered 23/12, 2011 at 16:26 Comment(0)

B

0

Actually in my case it was like

text-indent: -9999px

I used to remove the text, do not do that and it is clickable again.

Bedroll answered 14/2, 2012 at 10:27 Comment(0)

S

-1

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.

Spiffy answered 20/1, 2010 at 4:24 Comment(1)

Are you able to provide a public link to the page? – Spiffy 21/1, 2010 at 1:33

S

-1

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.

Sauncho answered 24/6, 2010 at 23:30 Comment(0)

A

-1

this is an awesome question. I would never have been able to figure out what was going on without this post. My solution though was to use rgba(0,0,0,0) instead of transparent gif.

Arielle answered 10/4, 2013 at 18:14 Comment(0)

Recommended topics

Hot tags