how to hide an image on css active in IE
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;
}
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.
精彩评论