Как я могу сделать свое изображение <input type="submit"/">?

У меня есть красивый маленький CSS-образ, который должен быть кнопкой. Я пробовал около 20 различных методов, ни одна из которых не работает. Я просто либо получаю пустоту, либо границу с чем-либо внутри.

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

Изображение: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

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

Я не могу изменить его для "отправки" по определенным причинам, поэтому мне нужно выяснить, как сделать эту работу с CSS. Спасибо за помощь!

Ответ 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;
}

Ответ 2

Используйте кнопку отправки изображения:

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

(Я бы не использовал изображение, предлагающее уличную почту при настройке онлайн-формы, но, возможно, есть основания создавать такие ассоциации.)

Ответ 3

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/

Ответ 4

простой и простой способ сделать тег INPUT в качестве изображения

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

Ответ 5

Вы можете переопределить стиль, заданный браузером, кнопке.

Например, добавление этого в ваш css делает трюк для меня (в 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;
}

Но действительно, если вы не собираетесь использовать браузер css для кнопки, вы, вероятно, вообще не должны использовать <input type='submit'> и просто вставляете изображение (через тег <img src="" /> или <div> с изображением как фон) и присоедините к нему прослушиватель кликов.

Например:

html:

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

javascript (если вы используете jQuery):

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

Ответ 6

Другим способом такого хакерства является использование jQuery:

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

Затем вы создаете свой div любым способом, который вам нравится.