Input boxes with transparent background are not cl-第2页回答

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>

标签： html css internet-explorer-8 internet-explorer inputbox

14条回答

趁早两清

2楼-- · 2019-01-21 16:32

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) 举报

ゆ、 Hurt°

3楼-- · 2019-01-21 16:32

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.

0人赞添加讨论(0) 举报

时光不老，我们不散

4楼-- · 2019-01-21 16:34

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) 举报

虎瘦雄心在

5楼-- · 2019-01-21 16:34

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) 举报

放我归山

6楼-- · 2019-01-21 16:37

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) 举报

▲ chillily

7楼-- · 2019-01-21 16:40

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) 举报

Input boxes with transparent background are not cl

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间