input type="image" shows unwanted border in Chrome and broken link in IE7

Question

I have not found a solution yet...

I tried everything

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

without any luck...and the funny thing is the broken link icon in IE7 which overlaps my image.

Any suggestion? link here

HTML (generated by 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 and Opera render the image button ok, but in Chrome and Safari I get that grey border around it. IE 7 and 8 add a symbol (broken icon?) over my image... I am baffled.

Solution 1

You are using the image as a background. Why not set it as the src property of the button ?

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

When you set the type as image the input expects an src attribute as well..

Reference: http://www.w3.org/TR/html401/interact/forms.html#adef-src and http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

Solution 2

For reference, if you want to stick to using CSS to give the button an image, for reasons such as providing a :hover or an :active rule, you can keep your code as is and add the button an invisible image, i went with:

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

Which means its a completly transparent image, size doesnt seem to matter, but i went with 1 px by 1px.

Solution 3

This worked for me:

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

Solution 4

Chrome, IE, and Safari parse the code foolishly.

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

is not parsed the same by these browsers as

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

Put all of your image inputs on the same physical line in the coded document. I just about punched a whole through my monitor with the same problem until I realized this.

View more solutions