Wie ändere ich ein Bild mit einer Eingabeschaltfläche mithilfe von CSS?

So kann ich mit eine Eingabeschaltfläche mit einem Bild erstellen

<INPUT type="image" src="/images/Btn.PNG" value="">

Mit CSS kann ich jedoch nicht dasselbe Verhalten erzielen. Zum Beispiel habe ich es versucht

<INPUT type="image" class="myButton" value="">

Dabei ist "myButton" in der CSS-Datei als definiert

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Wenn das alles ist, was ich tun wollte, könnte ich den ursprünglichen Stil verwenden, aber ich möchte das Erscheinungsbild der Schaltfläche beim Hover ändern (mithilfe einer myButton:hoverKlasse). Ich weiß, dass die Links gut sind, weil ich sie für ein Hintergrundbild für andere Teile der Seite laden konnte (nur zur Überprüfung). Ich habe im Web Beispiele dafür gefunden, wie man es mit JavaScript macht, aber ich suche nach einer CSS-Lösung.

Ich verwende Firefox 3.0.3, wenn das einen Unterschied macht.

Wenn Sie die Schaltfläche mit CSS formatieren möchten, machen Sie sie zu einer Schaltfläche type = "submit" anstelle von type = "image". type = "image" erwartet einen SRC, den Sie in CSS nicht festlegen können.

Beachten Sie, dass Sie in Safari keine Schaltfläche so gestalten können, wie Sie es suchen. Wenn Sie Safari-Unterstützung benötigen, müssen Sie ein Bild platzieren und über eine On-Click-Funktion verfügen, mit der das Formular gesendet wird.

Sie können das <button>Tag verwenden. Für eine Übermittlung einfach hinzufügen type="submit". Verwenden Sie dann ein Hintergrundbild, wenn die Schaltfläche als Grafik angezeigt werden soll.

Wie so:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

Weitere Informationen: http://htmldog.com/reference/htmltags/button/

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Dies funktioniert überall, auch in Safari.

Dieser Artikel über das Ersetzen von CSS-Bildern für Senden-Schaltflächen könnte hilfreich sein.

"Mit dieser Methode erhalten Sie ein anklickbares Bild, wenn Stylesheets aktiv sind, und eine Standardschaltfläche, wenn Stylesheets deaktiviert sind. Der Trick besteht darin, die Methoden zum Ersetzen von Bildern auf ein Schaltflächen-Tag anzuwenden und es stattdessen als Senden-Schaltfläche zu verwenden mit Eingang.

Und da Schaltfläche Grenzen gelöscht werden, ist es auch empfehlenswert Änderung der Hand die Taste Cursor ein für Links verwendet geformt, da dies für die Nutzer eine visuelle Spitze zur Verfügung stellt.“

Der CSS-Code:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Hier ist eine einfachere Lösung, aber ohne zusätzliche umgebende Div:

<input type="submit" value="Submit">

Das CSS verwendet eine grundlegende Technik zum Ersetzen von Bildern. Für Bonuspunkte wird die Verwendung eines Bildsprites angezeigt:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Quelle: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Folgendes hat für mich im Internet Explorer funktioniert, eine geringfügige Änderung der Lösung von Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Sie können blank.gif (1px transparentes Bild) als Ziel in Ihrem Tag verwenden

<input type="image" src="img/blank.gif" class="button"> 

und dann Hintergrund in CSS stylen:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Eine Variation der vorherigen Antworten. Ich habe festgestellt, dass die Deckkraft eingestellt werden muss. Dies funktioniert natürlich in IE6 und höher. Es gab ein Problem mit der Zeilenhöhenlösung in IE8, bei der die Schaltfläche nicht reagierte. Und damit erhalten Sie auch einen Handcursor!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Ich denke, das Folgende ist die beste Lösung:

CSS:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

html:

<input class="edit-button" type="image" src="transparent.png" />

Meine Lösung ohne js und ohne Bilder lautet:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

Vielleicht können Sie auch einfach eine .js-Datei importieren und dort das Bild in JavaScript ersetzen lassen.

Nehmen wir an, Sie können den Eingabetyp oder sogar den Quellcode nicht ändern. Sie haben NUR CSS zum Spielen.

Wenn Sie die gewünschte Höhe kennen und die URL eines Hintergrundbilds haben, das Sie stattdessen verwenden möchten, haben Sie Glück.

Stellen Sie die Höhe auf Null und die Polsterung auf die gewünschte Höhe. Dadurch wird das Originalbild außer Sichtweite und Sie erhalten einen perfekt sauberen Platz, um Ihr CSS-Hintergrundbild anzuzeigen.

Funktioniert in Chrome. Keine Ahnung, ob es im IE funktioniert. Kaum etwas Kluges tut es, also wahrscheinlich nicht.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">