发表新帖
发表新帖

Input boxes with transparent background are not clickable in IE8

后端 未结
关注
14 1698
暖寄归人
暖寄归人 2020-12-13 06:11

I have an absolutely positioned input box in a form. The input box has transparent background:

.form-page input[type=
相关标签:
14条回答
  • 轻奢々
    2020-12-13 06:50

    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.

    0 讨论(0)
  • 醉话见心
    2020-12-13 06:56

    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>
    0 讨论(0)
  • 眼角桃花
    2020-12-13 06:58

    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);}
    0 讨论(0)
  • 南笙
    2020-12-13 06:59

    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');"/>
    0 讨论(0)
  • 迷失自我
    2020-12-13 07:01

    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.

    0 讨论(0)
  • 青春惊慌失措
    2020-12-13 07:06

    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

    0 讨论(0)
 看不清?
提交回复
热议问题