Стиль ввода выглядит как гиперссылка

Question

Я пытаюсь сделать такую ​​кнопку во входе:

купить http://f.cl.ly/items/1X2W1G2c041V2j0S3T0q/Screen%20Shot%202011-08-15%20at%2011.05.51%20PM.png

Я могу сделать это как <a> (как видно в примере), но не могу понять это как <input>, главная проблема в том, что + изображение является частью спрайта, и когда я добавляю спрайт в На входе он становится размером входного тега (как видно в примере). Есть ли способ сделать так, чтобы он выглядел как приведенный выше пример без редактирования спрайта?

Пример

Answer 1

Поскольку вы не можете помещать элементы в тег <input />, вы не можете сделать это с помощью спрайта, вы можете сделать это с отдельным изображением.

Вы можете использовать свой первый пример и простоприсоедините к нему действие submit () с помощью JavaScript.

<a class="contentAddToCart2" href="document.getElementById('#formID').submit();return false;" id="submitButton">Buy Now<span></span></a>

с jQuery, который вы можете использовать вместо $('#formID').submit(); return false;, или присоедините его с помощью команды щелчка мышью.

DEMO: http://wecodesign.com/demos/stackoverflow-7074339.htm

$( document ).ready( function() {
    $( '#submitButton' ).bind( 'click', function() {
        $( this ).submit();
        return false;
    }
}

Answer 2

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

Пример здесь: http://jsfiddle.net/rre8d/

Answer 3

Если вы поместите свои спрайты друг на друга на изображении вместо рядом друг с другом , вы можете сделать это следующим образом: http://jsfiddle.net/QMgg8/ и изменить вертикальное положение спрайта в фоновом режиме.

Причиной появления пролетов является то, что вы можете назначить им фоновое изображение кнопки. В этой демонстрации я сделал их желтыми, потому что у меня нет твоего имиджа, и чтобы сделать доказательство концепции. Вы можете использовать vertical-position из background для .contentAddToCart, чтобы выбрать правильный спрайт. В настоящее время установлено значение top.

HTML

This is what I want the input to look like:<br/>
<span><a class="contentAddToCart" href="#">Buy Now</a></span>
<br/>
But this is as far as I have been able to figure out:<br/>
<span><input class="contentAddToCart" type="submit" name="Buy" value="Buy Now"></span>

CSS

.contentAddToCart {
   font-size: 15px;
   font-family: arial;
   text-decoration: none;
   color: black; 
   line-height: 24px;
   height: 24px;
   border: 1px solid #333;
   background: url("http://f.cl.ly/items/103I080w2r2Y0x122K3z/demo.png") no-repeat 58px top;
   display: inline-block;
   text-align: center;
   padding-right: 28px;
}

span {
    display: inline-block;
    background: yellow; /* put button background image here instead */
}