Come modificare un'immagine del pulsante di input utilizzando CSS?

Quindi, posso creare un pulsante di input con un'immagine usando

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

Ma non riesco a ottenere lo stesso comportamento usando i CSS. Ad esempio, ci ho provato

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

dove "myButton" è definito nel file CSS come

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

Se questo è tutto ciò che volevo fare, potrei usare lo stile originale, ma voglio cambiare l'aspetto del pulsante al passaggio del mouse (usando una myButton:hoverclasse). So che i collegamenti sono buoni, perché sono stato in grado di caricarli per un'immagine di sfondo per altre parti della pagina (proprio come un controllo). Ho trovato esempi sul web su come farlo utilizzando JavaScript, ma sto cercando una soluzione CSS.

Sto usando Firefox 3.0.3 se questo fa la differenza.

Se vuoi dare uno stile al pulsante usando CSS, rendilo un pulsante type = "submit" invece di type = "image". type = "image" prevede un SRC, che non è possibile impostare in CSS.

Tieni presente che Safari non ti consente di modellare alcun pulsante nel modo che stai cercando. Se hai bisogno del supporto di Safari, dovrai posizionare un'immagine e avere una funzione onclick che invia il modulo.

Puoi usare il <button>tag. Per un invio, aggiungi semplicemente type="submit". Quindi utilizzare un'immagine di sfondo quando si desidera che il pulsante appaia come immagine.

Così:

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

Maggiori informazioni: 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;
}

Funzionerà ovunque, anche in Safari.

Questo articolo sulla sostituzione delle immagini CSS per i pulsanti di invio potrebbe essere d'aiuto.

"Usando questo metodo otterrai un'immagine cliccabile quando i fogli di stile sono attivi e un pulsante standard quando i fogli di stile sono disattivati. Il trucco è applicare i metodi di sostituzione dell'immagine a un tag pulsante e usarlo come pulsante di invio, anziché utilizzando input.

E poiché i bordi dei pulsanti vengono cancellati, è anche consigliabile cambiare il cursore del pulsante con quello a forma di mano utilizzato per i collegamenti, poiché ciò fornisce un suggerimento visivo per gli utenti. "

Il codice CSS:

#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;
}

Ecco una soluzione più semplice ma senza div extra circostante:

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

Il CSS utilizza una tecnica di sostituzione delle immagini di base. Per i punti bonus, mostra usando uno sprite di immagini:

<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>

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

Ecco cosa ha funzionato per me su Internet Explorer, una leggera modifica alla soluzione di 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;
}

Puoi usare blank.gif (immagine trasparente 1px) come target nel tuo tag

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

e poi stile lo sfondo in CSS:

.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;}

Una variazione sulle risposte precedenti. Ho scoperto che è necessario impostare l'opacità, ovviamente funzionerà in IE6 e successivi. Si è verificato un problema con la soluzione di altezza della linea in IE8 in cui il pulsante non rispondeva. E con questo ottieni anche un cursore a mano!

<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;
}

Penso che la seguente sia la soluzione migliore:

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" />

La mia soluzione senza js e senza immagini è questa:

* 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;}

Forse potresti semplicemente importare anche un file .js e avere la sostituzione dell'immagine lì, in JavaScript.

Supponiamo che non sia possibile modificare il tipo di input o anche l'src. Hai SOLO css con cui giocare.

Se conosci l'altezza che desideri e hai invece l'URL di un'immagine di sfondo che vuoi usare, sei fortunato.

Imposta l'altezza su zero e la parte superiore imbottita all'altezza desiderata. Ciò sposterà l'immagine originale fuori dalla vista, dandoti uno spazio perfettamente pulito per mostrare l'immagine di sfondo CSS.

Funziona in Chrome. Non ho idea se funziona in IE. Quasi nulla di intelligente, quindi probabilmente no.

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

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