web-dev-qa-db-ja.com

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は私の画像の上に記号（壊れたアイコン？）を追加します...私は困惑しています。

cssimageinputborder
14
Mirko

画像を背景として使用しています。ボタンの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

20
Gabriele Petrioli

参考までに、：hoverや：activeルールを提供するなどの理由で、CSSを使用してボタンに画像を与えることに固執したい場合は、コードをそのままにして、ボタンを非表示の画像に追加できます。 ：

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

つまり、完全に透明な画像で、サイズは問題ではないようですが、1ピクセル×1ピクセルで使用しました。

10
Guillermo Siliceo Trueba

これは私のために働いた：

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

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">

コード化されたドキュメントの同じ物理行にすべての画像入力を配置します。これに気付くまで、同じ問題でモニター全体をパンチしました。

1
Sean

これは醜いですが、動作します...

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