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

如何隐藏在IE中活动的css上的图像

1 个答案: