Grafische Buttons für Formulare

Manchmal kann man stundenlang grübeln und kommt nicht weiter. Danach einfach mal drüber schlafen, wenn es wichtig ist, beschäftigt sich das Gehirn damit in der Nacht - und siehe da, es findet eine Lösung ;)

Bisher wusste ich zwar, dass man Absende-Buttons per HTML als Image einbinden kann, selbiges wollte aber natürlich nicht für Abbrechen- und Durchsuchen-Buttons funktionieren -> aber jetzt hab ich eine Lösung (keine Ahnung, wahrscheinlich bin ich nicht der erste mit dieser Lösung, aber egal):

Hier die benötigten CSS-Definitionen:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
.absenden {
background-color: transparent;
background-image: url(absenden.gif);
background-position: center;
background-repeat: no-repeat;
width: 80px;
height: 20px;
font-size: 0px; /* damit nn7 keine ersatzschrift anzeigt */
border: 0px solid white;
}
.abbrechen {
background-color: transparent;
background-image: url(abbrechen.gif);
background-position: center;
background-repeat: no-repeat;
width: 80px;
height: 20px;
font-size: 0px; /* nn7 */
border: 0px solid white;
}

Wichtig dabei ist es, die Values der Buttons mit einem maskierten Leerzeichen zu versehen, da Netscape 7 ansonsten eine “Ersatzbeschriftung” anzeigt!

Standardmäßig zeigen die Browser den Default-Cursor (Pfeil) an. Nachdem die CSS-Definition cursor: hand; nicht spezifiziert und somit nicht valide ist, kann man sich hier - wenn man das will - mit einem grafischen Cursor (*.ico) helfen ;)

Kommentare:

  1. thomas:
    Für MAC unter OSX:



    IE 5.5 - OK

    Firebird - OK



    Safari und Camino verweigern sich deiner Lösung für die Buttons und zeigen Standardbuttons ohne Beschriftung
    11. November 2003, 08:33
  2. prefix:
    danke dir ;)



    ist schade, dass der safari da nicht mitspielt - ev. findet sich da noch eine lösung (allerdings ist das immer extrem lähmend, da ich keinen mac zum schnellen testen habe) :(
    11. November 2003, 08:40

XML-Feed


Login