Jak zmienić obraz przycisku wprowadzania za pomocą CSS?

Mogę więc utworzyć przycisk wprowadzania za pomocą obrazu

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

Ale nie mogę uzyskać tego samego zachowania przy użyciu CSS. Na przykład próbowałem

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

gdzie „myButton” jest zdefiniowany w pliku CSS jako

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

Jeśli to wszystko, co chciałem zrobić, mógłbym użyć oryginalnego stylu, ale chcę zmienić wygląd przycisku po najechaniu myszką (za pomocą myButton:hoverklasy). Wiem, że linki są dobre, ponieważ udało mi się je załadować jako obraz tła dla innych części strony (tylko jako czek). Znalazłem w Internecie przykłady tego, jak to zrobić za pomocą JavaScript, ale szukam rozwiązania CSS.

Używam Firefox 3.0.3, jeśli to robi różnicę.

Jeśli chcesz stylizować przycisk za pomocą CSS, ustaw go jako przycisk type = "prześlij" zamiast type = "image". type = "image" oczekuje kodu SRC, którego nie można ustawić w CSS.

Pamiętaj, że Safari nie pozwoli Ci stylizować żadnego przycisku w sposób, którego szukasz. Jeśli potrzebujesz pomocy Safari, musisz umieścić obraz i mieć funkcję onclick, która przesyła formularz.

Możesz użyć <button>tagu. Aby przesłać, po prostu dodaj type="submit". Następnie użyj obrazu tła, jeśli chcesz, aby przycisk pojawiał się jako grafika.

Tak jak:

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

Więcej informacji: 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;
}

Działa to wszędzie, nawet w Safari.

Ten artykuł na temat zastępowania obrazów CSS przyciskami przesyłania może pomóc.

„Za pomocą tej metody otrzymasz klikalny obraz, gdy arkusze stylów są aktywne, i standardowy przycisk, gdy arkusze stylów są wyłączone. Sztuką jest zastosowanie metod zastępowania obrazu do tagu przycisku i użycie go jako przycisku przesyłania, zamiast przycisku używając danych wejściowych.

A ponieważ obramowania przycisków są usuwane, zaleca się również zmianę kursora przycisku na kursor w kształcie dłoni używany do linków, ponieważ zapewnia to wizualną wskazówkę dla użytkowników.

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

Oto prostsze rozwiązanie, ale bez dodatkowego otaczającego div:

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

CSS wykorzystuje podstawową technikę zastępowania obrazu. W przypadku punktów bonusowych pokazuje za pomocą duszka obrazu:

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

Źródło: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Oto, co działało dla mnie w Internet Explorerze, niewielka modyfikacja rozwiązania autorstwa 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;
}

Możesz użyć blank.gif (przezroczysty obraz 1px) jako celu w tagu

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

a następnie styl tła w 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;}

Odmiana poprzednich odpowiedzi. Zauważyłem, że należy ustawić krycie, oczywiście będzie to działać w IE6 i później. Wystąpił problem z rozwiązaniem wysokości linii w IE8, w którym przycisk nie reagował. Dzięki temu otrzymasz kursor ręki!

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

Myślę, że najlepszym rozwiązaniem jest:

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

Moje rozwiązanie bez js i bez obrazów jest następujące:

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

Być może możesz po prostu zaimportować plik .js i zamienić tam obraz w JavaScript.

Załóżmy, że nie możesz zmienić typu danych wejściowych ani nawet src. Masz TYLKO css do zabawy.

Jeśli znasz odpowiednią wysokość i masz adres URL obrazu tła, którego chcesz użyć, masz szczęście.

Ustaw wysokość na zero, a miękki top na żądaną wysokość. Spowoduje to, że oryginalny obraz zniknie z pola widzenia, dzięki czemu uzyskasz idealnie czyste miejsce do wyświetlania obrazu tła css.

Działa w Chrome. Nie mam pojęcia, czy działa w IE. Prawie nic mądrego nie robi, więc prawdopodobnie nie.

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

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