Frage, Suchfeld anders gestallten?

Hallo Leute, ich habe da mal eine kleine CSS Frage...
Es gibt ja das Modul für ein Suchfeld das wie folgt aufgebaut ist...

HTML-Code:

---

<div class="mod_search block">
 <form action="suchausgabe.html" method="get">
  <div class="formbody">
  <label for="ctrl_keywords_9" class="invisible">Suchbegriffe</label>
  <input type="search" name="keywords" id="ctrl_keywords_9" class="text" value="">
  <input type="submit" id="ctrl_submit_9" class="submit" value="Suchen">
  </div>
 </form>
</div>

---

Jetzt eine eine Bekannte von mir ein Suchen Feld für eine eigene Internetseite erstellt das sie hübscher findet. Ich weiß das man so etwas irgendwie verändern kann mit Hilfe von CSS, aber ich habe absolut keine Idee wie man das anpassen könnte.

Die Lupe die zum Suchen auf dem Bild ist, soll bei einem Mouse-Over (hover) dann ganz schwarz werden, dass würde ich vielleicht hinterher hin bekommen, aber wie bekomme ich denn das ganz normale Suchfeld so formatiert das es so aussieht, wie auf dem Bild.. kann mir jemand dabei helfen?

Gruß, Domi

einfach zum Suchfeld ein Absendefeld im Formulargenerator mit der Lupe als Bild anlegen ... das hover Bild und der Rest per CSS

Also ein Absendenfeld existiert, aber mit der Formatierung per CSS harkt es... :o

das css kannst ja von contao.org abschauen ;)

Ja, ich habe gerade mal ein wenig in dieser CSS und bei Computerbase geschaut. Mein Ergebnis sieht jetzt ungefähr so aus :D

Code:

---

#header .mod_search {
 width:140px;
 margin-right:17px;
 margin-left:auto;
}

#header .mod_search .formbody {
 padding-top:10px;
}

#header .mod_search #ctrl_keywords_9 {
 width:96px;
 height:26px;
 float:left;
 margin:0;
 padding:0 2px 0 6px;
 background-image:url("tl_files/template/search_text.png");
 background-repeat:no-repeat;
 border:0;
}

#header .mod_search #ctrl_submit_9 {
 width:27px;
 height:26px;
 float:left;
 margin:0;
 padding:0;
 background-image:url("tl_files/template/search_button.png");
 background-repeat:no-repeat;
 border:0;
 color: transparent;
 cursor: pointer;
}

---

Das einzige was mir mein Arbeitskollege der noch im Büro ist, sagen konnte.. im IE 8 wird noch der Value Text vom Absenden Button angezeigt. Wie bekomme ich den denn noch weg, außer mit "color: transparent;", gibt es da noch einen Trick den ich übersehen habe?