Как заполнить кнопку отправки с изображением?

Question

поэтому у меня есть кнопки отправки с этим кодом:

<form method="post"> 
    <input name="submit" type="submit" class="icon" value=" "/> 
</form> 

в CSS У меня есть:

.icon{ 
    background-color:transparent; 
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png); 
    height:20px; 
    width: 20px; 
    background-position:center; 
    border:none; 
    cursor:pointer; 
    background-size: 100%; 
} 

Но проблема в том, что изображение (то есть H: 40px и вес: 40px) не сжимается, чтобы соответствовать кнопке 20px ... У вас, ребята, есть решение для этого? (Я скорее не использую javascript, если это возможно)

EDIT: В настоящее время работает. Я просто удалить историю, наличные деньги, и это работает ... ти

Answer 1

попробовать это: -

background-size:20px 20px; 

Answer 2

Добавить идентификатор к кнопке Обновление изображения:

document.body.onclick=function(e){ 
    debugger; 
    var bid=document.getElementById('bid'); 
    bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";; 
} 

JS скрипку here.

Answer 3

добавить эту строку в файл CSS:

display:block; 

Answer 4

Вам нужно обернуть пролетом кнопку и стиль его представить.

DEMO http://jsfiddle.net/H5dmd/2/

HTML

<form method="post"> 
    <span class="icon"> 
     <input name="submit" type="submit" value=" "/> 
    </span> 
</form> 

CSS

input[type=submit]{ 
    background:transparent; 
    width:20px; 
    height:20px; 
    border:none; 
    padding:none; 
    cursor:pointer; 
} 
.icon{ 
    float:left; 
    background-color:transparent; 
    background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png); 
    height:20px; 
    width: 20px; 
    background-position:center; 
    border:none; 
    cursor:pointer; 
    background-size: 100%;   
} 

Answer 5

Вы можете просто использовать ввод типа изображения, оно существует для этой цели именно: кнопка отправки показывает изображение. В качестве бонуса вы также получите координаты, в которые пользователь нажал.

Пример:

<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" /> 

Live test case.

Только один недостаток: в боковом коде сервера, обрабатывающем форму, вам нужно будет проверить, не являются ли «mysubmit.x» и/или «mysubmit.y» неизвестными, есть ли у вас что-либо отправленное, которое меньше интуитивно понятный, чем просто проверка «mysubmit».

Answer 6

Используйте вместо этого image submit button и сжимайте элемент до требуемых размеров с помощью CSS.

<input name="submit" type="image" class="icon" 
style="width: 20px; height: 20px" 
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" 
alt="Send" /> 

Answer 7

Я вижу несколько вариантов здесь:

экономии

Сохранить изображение 20х20 и возгласы, проблема ушла Изменить.

Использование CSS3

CSS3 вводит новую функцию, которая backgroud-size

Просто положить, что в вашем CSS:

background-size: 20px 20px; 

Но это не будет совместима со старыми браузерами.

Использование JavaScript [Bad стиль]

HTML

<form method="POST" action="test.php" name="myform"> 
    <a onclick="javascript:document.forms['myform'].submit();" ><img src="myimage.png" onclick="submit();" /></a> 
</form>