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

Я еще не нашел решение...

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

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 добавляют символ (сломанный значок?) По моему изображению... Я озадачен.

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

Ответ 5

Это уродливо, но оно работает...

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

Ответ 6

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

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