Question

我在表单中有一个绝对定位的输入框。输入框具有透明背景：

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

令人惊讶的是，我无法通过在IE8中单击它来选择此输入框。但它在Firefox中完美运行。 background: none也是如此。当我更改背景颜色时：

    background-color: red;

它工作正常，所以这是与透明背景相关的问题。通过设置边框，只需单击其边框即可选择输入框。

是否有一种解决方法可以在IE8中使用透明背景的可点击输入框？

更新：示例。取消注释background-color并且输入框是可选的。您也可以单击选择框，然后按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>

Answer 1

我无法在IE8中重现这样的问题。完整的测试案例？你确定没有分层问题导致其他透明元素覆盖可点击区域吗？

设置background-image会有所作为吗？如何使用透明的GIF？

ETA：好奇！它实际上是一个IE7错误。对我来说，你的例子展示了IE7中描述的行为，但在IE8中，它只在EmulateIE7模式下出现;在IE8本机渲染中它是固定的。您通常希望通过使用合适的X-UA-Compatible标头/元来确保不会回退到IE7渲染;但是，是的，将background-image设置为透明GIF可以解决我的问题。 Tsk，即使在这个时代，我们仍然需要空白的GIF，呵呵？

Answer 2

您必须定义（透明）背景图像。

以防万一有人会感兴趣。建议的解决方法之一......

Answer 3

请包含输入元素的html。

你是如何定义输入元素的？以下代码适用于IE8（IE 8.0.7600 Windows）。我在IE8中试过这个并且能够“选择”输入区域就好了。

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

Answer 4

只需为输入字段指定一个透明的背景图像即可...

示例：

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}

Answer 5

这是一个非常简单的测试用例：

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

在IE8中运行时 - 您应该看到底层文本框上的焦点而不是绝对定位的文本框。

我们的解决方案是设置透明背景颜色和透明背景图像：

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>

Answer 6

我在Windows 7上使用IE10发现了同样的问题。以下两种方法都为我解决了这个问题。

Franky使用透明背景图像的方法......

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

使用带有'0'不透明度的rgba背景颜色的Sketchfemme方法

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

吉姆杰弗斯建议编辑z-index对我不起作用。

Answer 7

IE以其无限的智慧决定不渲染该项目，因为它认为没有任何东西需要渲染。有很多方法可以解决这个问题，但基本上你需要给IE一些东西来咀嚼。

在输入标签本身添加'value = x'绝对有效。但更有可能的是，这不是最好的解决方案。一个简单的颜色：黑色（没有焦点）允许元素被选中。将“：focus”添加到输入样式允许元素呈现。

试试这个：

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

Answer 8

正如bobince观察到的，这是一个IE7错误。我有时会发现通过添加value="       "来解决它很方便。根据需要使用尽可能多的不间断空间，以使可点击区域足够大。根据您的应用程序，您可能需要稍后删除它们。

Answer 9

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

Answer 10

有类似的问题 - ＆gt; IE8文本框不可编辑（当我的应用程序的包装器具有位置：绝对时）。单击仅在边框中工作。填充颜色和透明也没有工作。通过以下doctype更改，问题已修复。

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

来源：http://www.codingforums.com/showthread.php?p=1173375#post1173375

Answer 11

实际上在我的情况下就像是

text-indent: -9999px

我以前删除了文本，不要这样做，并且可以再次点击。

Answer 12

看起来很奇怪，但您应该尝试明确指定所涉及元素的z-index。这应该强制输入在元素的顶部渲染，并应用背景颜色/图像。

Answer 13

似乎即使使用透明的gif技巧，如果你在CSS中的任何其他地方设置背景：透明，对于实际的网络浏览器，它会触发IE7错误并且你没有在悬停上获得光标而不能轻松点击进入输入框。

Answer 14

这是一个很棒的问题。如果没有这篇文章，我将永远无法弄清楚发生了什么。我的解决方案是使用rgba(0,0,0,0)而不是透明的gif。

在IE8中无法单击具有透明背景的输入框

14 个答案: