如何在 IE 中隐藏 CSS 活动图像

Question

我有一个输入框，它是我的登录功能的一部分。我正在 css 中显示图像，然后单击框 (:active)，图像消失，允许用户输入信息。我使用图像的原因是因为文本密码显示*。

这在除 IE 之外的所有浏览器中都可以正常工作。任何人都可以帮忙。

HTML：

<form class="additemsignupformlivregister">
  <div class="logininputdiv">
    <input type="text" class="filterinput clearField">
  </div>
  <div class="logininputdiv">
     <input type="password" class="filterinputpassword clearField">
  </div>
 </form>

这是 CSS：

.filterinput {
-moz-border-radius:3px;
border-radius:3px;
-webkit-border-radius:3px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 2px #9B9B9C inset;
color: #9b9b9c;
font-family: arial;
font-size: 12px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
margin-left: -3px;
padding-left: 5px;
padding-right: 10px;
width: 170px;
background-image: url("../images/enteremail.png");
background-repeat: no-repeat;
}

同样，单击输入字段，图像会在 Firefox、Chrome 和 Safari 中消失，但不会在 IE 中消失。谢谢。

.filterinput:focus{
box-shadow:0 0 2px #000000 inset;
-moz-box-shadow:0 0 2px #000000 inset;
-webkit-box-shadow:0 0 2px #000000 inset;
color: #000000;
background: none;
}

Answer 1

IE 5.5、6 和 7 不支持 :focus css 选择器

http://reference.sitepoint.com/css/pseudoclass-focus

将 id 添加到您的密码输入中

<input id="password" type="password" class="filterinputpassword clearField">

将其添加到您的 head 标记中

<!--[if lte IE 7]>
<script type="text/javascript">
    var password = document.getElementById("password");
    var defaultClasses = this.className;
    password.onfocus = function () {
        this.className = defaultClasses + " focus";
    }
    password.onblur = function () {
        this.className = defaultClasses;
    }
</script>
<![endif]-->

并将其添加到您的 CSS 中：

.filterinput:focus, .filterinput.focus { /* same as before */ }

---

使用 jQuery 你只需要这样做：

<!--[if lte IE 7]>
<script type="text/javascript">
    $(function(){
        $("input:password").bind("focus blur", function() { 
            $(this).toggleClass("focus"); 
        });
    });
</script>
<![endif]-->

仅将其包装起来，以便其他正常工作的浏览器不会有此开销。

您仍然需要定义 css .filterinput.focus 类。