Jak mogę uczynić mój <input type = "submit" /> obraz?

Question

Mam piękny mały obraz CSS, który musi być przyciskiem. Próbowałem już około 20 różnych metod, z których żadna nie działa. Właśnie dostaję puste nic lub granicę z niczym w środku.

HTML: http://lrroberts0122.github.com/DWS/lab6/level-2/

obrazka: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

CSS: http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css

nie mogę go zmienić na "wyślij" z pewnych względów, więc trzeba dowiedzieć się, jak spraw, aby działało to z CSS. Dziękuję za pomoc!

Answer 1

input[type=submit] { 
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png); 
    border: 0; 
    display: block; 
    height: _the_image_height; 
    width: _the_image_width; 
} 

Answer 2

Użyj obrazu przycisk Wyślij: (. Nie chciałbym użyć obrazu sugeruje snailmail podczas konfigurowania formularz online, ale może jest jakiś powód, aby stworzyć takie skojarzenia)

<input type=image src=button.png alt="Submit feedback"> 

Answer 3

Możesz zmienić styl przypisany przez przeglądarkę do przycisku.

Na przykład dodanie tego do css załatwia sprawę dla mnie (w Chrome):

.controls input { 
    background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat; 
    width: 199px; 
    height: 109px; 
    border: none; 
} 

ale naprawdę jeśli nie zamierzasz używać css w przeglądarce za pomocą przycisku, należy prawdopodobnie nie używać <input type='submit'> w ogóle i po prostu wstaw obraz (za pomocą znacznika <img src="" /> lub <div> z obrazem jako tłem) i dołącz do niego detektor kliknięcia.

Na przykład:

HTML:

<div class="controls"> 
    <img src="/yourimage.png" /> 
</div> 

javascript (zakładając że używasz jQuery):

$('.controls img').click(function(){... stuff to do...}); 

Answer 4

HTML:

<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/> 
<lable>From HTML tag</lable> 
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/> 

CSS:

.btn{ 
    display: inline-block; 
background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico); 
    position: relative; 
    border-radius: 5px; 
} 
.input{ 
    background: transparent; 
    color: #fff; 
    border: 0; 
    padding-right: 20px; 
    cursor: pointer; 
    position: relative; 
    padding: 5px 20px 5px 5px; 
    z-index: 1; 
} 

JS Fiddle:http://jsfiddle.net/AJNnZ/26/

Answer 5

Inny sposób to rodzaj hackish jest to (przy użyciu jQuery):

<div onclick="$(this).parent('form').submit();"></div> 

Wtedy stylizowania div dowolny sposób lubić.

Answer 6

prosty i łatwy sposób, aby znacznik WEJŚCIE jako obraz

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">