发表新帖
发表新帖

Input boxes with transparent background are not clickable in IE8

后端 未结
关注
14 1697
暖寄归人
暖寄归人 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:42

    You have to define a (transparent) background image.

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

    0 讨论(0)
  • 别那么骄傲
    2020-12-13 06:43

    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.

    0 讨论(0)
  • 礼貌的吻别
    2020-12-13 06:45

    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?

    0 讨论(0)
  • 孤街浪徒
    2020-12-13 06:45

    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>
    0 讨论(0)
  • 余生分开走
    2020-12-13 06:45

    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.

    0 讨论(0)
  • 你的背包
    2020-12-13 06:49

    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.

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