Tôi làm cách nào để tạo hình ảnh <input type = "submit" />?

Question

Tôi có một hình ảnh CSS nhỏ đẹp mà cần phải là một nút. Tôi đã thử khoảng 20 phương pháp khác nhau, không có phương pháp nào hoạt động. Tôi chỉ nhận được một trống không có gì hoặc một biên giới không có gì bên trong.

Các html: http://lrroberts0122.github.com/DWS/lab6/level-2/

Hình ảnh: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

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

tôi không thể thay đổi nó để "submit" vì những lý do nào đó, vì vậy tôi cần phải tìm ra cách để làm cho công việc này với CSS. Cảm ơn sự giúp đỡ của bạn!

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

Sử dụng hình ảnh nút gửi: (. Tôi sẽ không sử dụng hình ảnh cho thấy snailmail khi thiết lập một hình thức trực tuyến, nhưng có lẽ có một số lý do để tạo ra các hiệp hội như vậy)

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

Answer 3

Bạn có thể ghi đè kiểu được trình duyệt đưa ra cho nút.

Ví dụ này thêm vào css của bạn hiện các trick cho tôi (trên 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; 
} 

Nhưng thực sự nếu bạn đang không sử dụng css của trình duyệt cho các nút, bạn nên có lẽ không sử dụng <input type='submit'> và chỉ cần chèn hình ảnh (thông qua một thẻ <img src="" /> hoặc <div> với hình ảnh làm nền) và đính kèm trình nghe nhấp chuột vào đó.

Ví dụ:

Các html:

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

Các javascript (giả sử bạn sử dụng 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

Một cách khác đó là loại hackish là này (sử dụng jQuery):

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

Sau đó, bạn phong cách div của bạn bất kỳ cách nào bạn như.

Answer 6

đơn giản và dễ dàng để làm cho một thẻ đầu vào như một hình ảnh

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