Question

I have an input box that is part of my log in functionality. I am displaying an image in css and onclick on the box (:active), the image disappears allowing the user to type in the information. The reason I am using an image is because of the text password displaying *.

This works fine in all browsers except IE. Can anyone help.

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>

Here is the 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;
}

Again, onclick on the input field the image disappears in Firefox, Chrome, and Safari but not IE. Thanks.

.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, and 7 do not support the :focus css selector

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

Add an id to your password input

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

Add this in your head tag

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

And this to your CSS:

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

---

Using jQuery you would only need to do this:

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

Only wrapped that so that other browsers that work properly don’t have this overhead.

You will still need the css .filterinput.focus class defined.