Best IT Recipes

Transparent background input boxes don't change in IE8

I have an absolutely positioned input field on a form. The input field has a transparent background:

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

Surprisingly, I cannot select this input field by clicking on it in IE8. However, it works fine in Firefox. The same thing happens with background: none . When I change the background color:

  background-color: red;

It works great, so this is a problem with the transparent background. Setting the border allows you to select an input field by clicking only on its border.

Is there a workaround to have an interactive input field with a transparent background working in IE8?

Update: Example. Uncomment background-color and the input field is selected. You can also click on the selection field and focus the input field 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>
+49
html css internet-explorer internet-explorer-8 inputbox
Jan 20
source share
14 answers

I can not reproduce such a problem in IE8. Full test? Are you sure that there is no problem with delamination causing some other transparent element to cover the area that can be clicked on?

Is the background-image setting background-image ? How about a transparent GIF?

ETA: Curious! This is actually an IE7 bug. For me, your example demonstrates the described behavior in IE7, but in IE8 it is only in EmulateIE7 mode; in the original rendering of IE8, it is fixed. Usually you need to make sure that you are not returning to rendering IE7 with the appropriate X-UA-Compatible header / meta; however, yes, setting background-image to a transparent GIF fixed the problem for me. Tsk, we still need an empty GIF even on this day and in age, huh?

+26
Jan 20 '10 at 2:55
source share
— -

Please specify 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 "correctly select" the input area.

 <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>
+8
Jan 20 '10 at 2:57
source share

You must define a (transparent) background image.

Just in case, someone will be interested. One of the suggested workarounds ....

+8
Jan 20 '10 at 21:35
source share

Just enter 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);}
+6
Dec 01 '10 at 8:33
source share

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 working in IE8, you should see the focus on the base text field instead of the absolutely placed text field.

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

 <INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
+2
Apr 29 '10 at 5:14
source share

I found the same problem as IE10 in Windows 7. Both of these methods fixed the problem.


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

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


Sketchfemme method using rgba background color with opacity '0'

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


Jim Jeffer's suggestion for z-index editing doesn't work for me.

+2
Feb 25 '14 at 12:11
source share

IE, in its infinite wisdom, decides not to display the element, because it thinks that nothing can be done. There are many ways to solve this problem, but basically you need to give IE something to chew on.

Adding the value 'value = x' to the input tag definitely works. But, most likely, this is not the best solution. Simple, color: black (no focus) allows the element to overlap. Adding ': focus' to the input style allows the element to render.

Try the following:

 <!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>
+1
Jan 20 '10 at 4:38
source share

As bobbin noted, this is an IE7 bug. Sometimes it was convenient for me to solve this problem by adding value=" &nbsp; &nbsp; &nbsp; " . Use as many inextricable spaces as possible to make the click area large enough. Depending on your application, you may need to remove them later.

+1
Mar 12 '11 at 19:38
source share
  background-image:url(about:blank);background-color:transparent;
+1
Feb 17 '14 at 3:43
source share

If a similar problem → the IE8 text box has not been edited (when the shell of my application has a position: absolute). Clicking works only on the border. Filled with color and transparent also did not work. If you change the following document type, the problem is resolved.

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

0
Dec 23 '11 at 16:26
source share

Actually, in my case it was like

 text-indent: -9999px

I used to delete the text, I do not do this, and it can be clicked again.

0
Feb 14 '12 at 10:27
source share

This may seem strange, but you should try to explicitly specify the z-index of the elements involved. This should make the input appear on top of the element with the background color / image applied to it.

-one
Jan 20 '10 at 4:24
source share

It seems that even when using a transparent gif trick, if you set the background: transparent anywhere else in your CSS, for real web browsers, it causes an IE7 error, and you don't get the cursor hovering and can't easily click on the input field .

-one
Jun 24 '10 at 23:30
source share

This is an amazing question. I would never be able to understand what would happen without this post. My solution was to use rgba(0,0,0,0) instead of a transparent gif.

-one
Apr 10 '13 at 18:14
source share


More articles:


All Articles