как скрыть изображение на css, активном в IE

Question

У меня есть поле ввода, которое является частью моей функциональности входа в систему. Я показываю изображение в css и нажимаю на поле (: активно), изображение исчезает, позволяя пользователю вводить информацию. Я использую изображение по той причине, что текстовый пароль отображает *.

Это прекрасно работает во всех браузерах, кроме 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

Добавить идентификатор для ввода пароля

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