input:focus Hintergrund ausblenden

[klognfurta]

Hallo,

ich hab ein Suchformular - im Hintergrund hab ich eine Grafik (search) die ausgeblendet werden soll wenn man ich das suchfeld hineinklickt.

css Code:

  
form input { background-image:url(../images/search-bg.gif); background-position:left center; background-repeat:no-repeat; }  
form input:focus { background-image:none; }  

Funktioniert mit Firefox.

Problem: funktioniert nicht mit IE

Kennt jemand einen patch für IE oder eine alternative Lösung.

Danke

[Axel Richter]

Hallo,

ich hab ein Suchformular - im Hintergrund hab ich eine Grafik (search) die ausgeblendet werden soll wenn man ich das suchfeld hineinklickt.

css Code:

form input { background-image:url(../images/search-bg.gif); background-position:left center; background-repeat:no-repeat; }
form input:focus { background-image:none; }

>   
> Funktioniert mit Firefox.  
>   
> Problem: funktioniert nicht mit IE  
>   
> Kennt jemand einen patch für IE oder eine alternative Lösung.  

Für den IE mit JavaScript:  
  
~~~javascript
  
function removeBackgroundImage() {  
 this.style.backgroundImage = "none";  
}  
function restoreBackgroundImage() {  
 this.style.backgroundImage = "";  
}  
window.onload = function() {  
 myForm = document.forms[0];  
 myInputs = myForm.getElementsByTagName("input");  
 for (var i = 0; i < myInputs.length; i++) {  
  myInputs[i].onfocus = removeBackgroundImage;  
  myInputs[i].onblur = restoreBackgroundImage;  
 }  
};  

Das JavaScript dann per <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comment> nur für den IE einbinden.

viele Grüße

Axel