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

Я хочу, чтобы моя кнопка отправки для моей страницы входа была изображением вместо серой кнопки. Когда я использую css для этого, я получаю кнопку поверх изображения. Есть ли способ использоватьИспользуйте изображение как кнопку отправки

= submit_tag image_tag('image/location.jpg) 'Login', :id => 'Login'

Если бы я мог изменить размер кнопки определенного размера, который будет работать, как хорошо, так как я могу поместить его там, где я хочу с помощью CSS.

Спасибо!

источник

2013-04-27 Blackdragon1400

Вы пробовали:

.element { 
    appearance: none; 
    -webkit-appearance: none; 
    background-image: url(path/img-png) no-repeat 0 0; 
    background-size: /* (desired size in pixels or %) */ 40px 50px; 
    -moz-background-size: /* (desired size in pixels or %) */ 40px 50px; 
    border: none; 
    outline: none; 
    /* any other desired rules */ 
}

источник

2013-04-27 18:59:09

submit_tag генерирует HTML input type='submit'. Вам нужен html button, который может генерировать рельсы с помощью button_tag.

= button_tag :id => 'Login' do 
    image_tag('image/location.jpg')

источник

2013-04-27 19:02:29 Taavo

Насколько я знаю, что есть <input type="image" src="..."/> что сделает акт изображения в качестве кнопки отправки. Я не знаю рубина на рельсах, но быстрый поиск оказался image_submit_tag(source, options = {}). Вы можете посмотреть документы here.

источник

2013-04-27 19:07:12

Это отлично работает, однако есть ли способ изменить размеры этого? Он по-прежнему делает кнопку «размер кнопки» с фоном изображения, которое я хочу использовать. – Blackdragon1400

@ Blackdragon1400 - Добавьте атрибут 'width =" x "height =" x "' к тегу, чтобы он соответствовал вашему размеру изображения. Я думаю, вы можете сделать это так: image_submit_tag (source,: size => "{width} x {height}") '. –

Ваш код должен работать, но изображение по-прежнему не меняется. Он работает на сервере rails, поэтому он синтаксически корректен, и я проверил его, поэтому я не уверен, в чем проблема. – Blackdragon1400

Замена кнопки <input> с <img> тега не является хорошей идеей, поскольку она нарушает принцип progressive enhancement: вы должны держать свой сайт как можно более доступным, в то время как enhansing его capabilites, когда браузер позволяет.

В вашем случае, есть чистый CSS решение превратить классическую <input type=submit> кнопку в изображение:

input { 

    /* sizing the button */ 
    width: 10em; 
    height: 10em; 

    /* disabling the system look */ 
    appearance: none; 
    -webkit-appearance: none; 

    /* resetting default browser styler */ 
    border: 0; 
    margin: 0; 
    padding: 0; 

    /* hiding button label */ 
    text-indent: -9999px; 

    /* applying the image */ 
    background: url('http://i.imgur.com/1x8TMLt.jpg') no-repeat transparent; 
    background-size: 100% 100%; /* stretching */ 

    /* letting users know it's clickable */ 
    cursor: pointer; 
}

Когда CSS недоступен по какой-то причине, то кнопка будет отображаться в виде кнопки с текстовой меткой , Когда CSS доступен, кнопка будет отображаться как изображение заданного размера, yay!

Демо: http://jsbin.com/okasut/1/edit

Конечно, вы должны использовать некоторые семантические селектор.

источник

2013-04-27 19:14:17

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

ответ

Смежные вопросы