14

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.

Paranoid Android
  • 4,672
  • 11
  • 54
  • 73
  • 1
    And a link or screenshot of what you see. – Jim Garrison Nov 05 '10 at 18:50
  • Why don't you use the tag instead? – Babak Naffas Nov 05 '10 at 19:32
  • can you change the `border:0;` to `border:none;` for me? I'm inspecting it with chrome. – Stephen Nov 05 '10 at 21:29
  • @Stephen I solved it using the solution below, even though I used only CSS in another website and I did not have any problem (and the page validates). If you use Chrome and you have FireBug Lite installed you can edit the CSS on the fly like you probably do in Firefox. Thank you very much anyway – Paranoid Android Nov 05 '10 at 22:06

6 Answers6

20

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

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • This is a Chrome/Safari bug. When you give it a src attribute no image is displayed, instead only the grey box around the image is rendered. The only way to get the image is with background-image - which always gives you an unwanted grey box. – user1040323 Mar 20 '13 at 12:01
10

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.

Guillermo Siliceo Trueba
  • 4,251
  • 5
  • 34
  • 47
  • it should probably be an invisible gif, for ie6 compatibility reasons. – Guillermo Siliceo Trueba Jan 31 '12 at 05:44
  • 1
    This is a little old. But here goes, you don't have to use a gif. You can also just use a 8bit PNG, this is supported by IE. – Allan Kimmer Jensen Jul 25 '12 at 11:02
  • This is also useful when using css sprites as the background image via class. The transparent gif reference gets rid of the border in Chrome. BTW, I prefer .gif because it's less than half the size of a png (likely due to the container headers) at this size. – secretwep Jul 08 '14 at 18:45
5

This worked for me:

input[type="image"]:focus {
    outline: none;
}
Jason Silver
  • 527
  • 7
  • 23
1

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.

jlstrecker
  • 4,953
  • 3
  • 46
  • 60
Sean
  • 11
  • 1
0

This is ugly but it works...

<input id="saveForm" style="border:0px;" type="image" name="submit" value="Submit" BORDER="0" src="./images/button_submit.png" />
j0k
  • 22,600
  • 28
  • 79
  • 90
Dave Abad
  • 9
  • 1
-1

Try this

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