input type = "image" показывает нежелательную границу в Chrome и неработающую ссылку в IE7

Question

Я пока не нашел решения ...

Я попробовал все

border:0;
border:none;
outline:none;

без везения ... и забавно то, что в IE7 значок разорванной ссылки перекрывает мое изображение.

Есть предложения? ссылка здесь

HTML (генерируется WordPress)

<form id="searchform" method="get" action="http://eezzyweb.com/">
   <div>
  <input id="s" name="s" type="text" value="" size="32" tabindex="1"/>
  <input id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>
   </div>
</form>

CSS

input#s{
position:relative;
width:245px;
height:28px;
border:0;
vertical-align:bottom;
background:url(images/input-search-bkg.png) 0 0 no-repeat;
}

#searchsubmit {
display:inline-block;
background:url(images/submit-bkg.png) 0 0 no-repeat;
width:30px;
height:30px;
border:0;
vertical-align:bottom;
}

Firefox и Opera хорошо визуализируют кнопку изображения, но в Chrome и Safari я получаю эту серую рамку вокруг нее. IE 7 и 8 добавляют символ (сломанный значок?) На моем изображении ... Я сбит с толку.

Answer 1

Вы используете изображение в качестве фона.Почему бы не установить его в качестве свойства src кнопки?

<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

Когда вы устанавливаете type как image, вход также ожидает атрибут src ..

Ссылка: http://www.w3.org/TR/html401/interact/forms.html#adef-src и http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

Answer 2

Для справки: если вы хотите придерживаться использования CSS для придания кнопке изображения, по причинам, таким как предоставление правила: hover или: active, вы можете оставить свой код как есть и добавить кнопку невидимым изображением,я пошел с:

<input type='image' src='invisible.png'/>

Это означает, что это полностью прозрачное изображение, размер не имеет значения, но я пошел с 1 px на 1px.

Answer 3

Это сработало для меня:

input[type="image"]:focus {
    outline: none;
}

Answer 4

Chrome, IE и Safari по глупости разбирают код.

<input type="image" src="bleh.png">
<input type="image" src="bleh.gif">

не обрабатывается этими браузерами так же, как

<input type="image" src="bleh.png"><input type="image" src="bleh.gif">

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

Answer 5

Это безобразно, но работает ...

<input id="saveForm" style="border:0px;" type="image" name="submit" value="Submit" BORDER="0" src="./images/button_submit.png" />

Answer 6

Попробуйте это

a:active {
 outline: none;
}
a:focus {
 -moz-outline-style: none;
}
a, input {
 outline-color: invert;
 outline-style: none;
 outline-width: medium;
}