input type = "image" mostra bordo indesiderato in Chrome e collegamento interrotto in IE7

Question

non ho trovato una soluzione ancora ...

Ho provato di tutto

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

senza fortuna ... e la cosa divertente è l'icona di collegamento interrotto in IE7 che si sovrappone alla mia immagine.

Qualche suggerimento? link here

HTML (generato da 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 e Opera rendere il pulsante immagine ok, ma in Chrome e Safari ottengo che bordo grigio intorno ad esso. IE 7 e 8 aggiungi un simbolo (icona spezzata?) Sulla mia immagine ... Sono sconcertato.

Answer 1

Si sta utilizzando l'immagine come sfondo. Perché non impostarlo come proprietà src del pulsante?

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

Quando si imposta il type come image l'ingresso si aspetta un src attributo come pure ..

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

Answer 2

Prova questa

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

Answer 3

Chrome, IE, e Safari analizza stupidamente il codice.

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

non viene analizzato lo stesso da questi browser come

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

Mettere tutti i tuoi ingressi di immagini sulla stessa linea fisica nel documento codificato. Ho praticamente preso a pugni un intero attraverso il mio monitor con lo stesso problema fino a quando non me ne sono reso conto.

Answer 4

Per riferimento, se si desidera attenersi all'utilizzo di CSS per assegnare al pulsante un'immagine, per motivi come fornire un: hover o una: regola attiva, è possibile mantenere il codice così com'è e aggiungere al pulsante un'immagine invisibile , sono andato con:

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

Il che significa che la sua un'immagine completamente trasparente, formato doesnt sembra avere importanza, ma sono andato con 1 px per 1px.

Answer 5

Questo è brutto ma funziona ...

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

Answer 6

questo ha funzionato per me:

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