Un modo per rimuovere il bordo nero di IE attorno al pulsante di invio nei moduli attivi?

Sto implementando un design che utilizza pulsanti di invio personalizzati. Sono semplicemente pulsanti grigio chiaro con un bordo esterno leggermente più scuro:

input.button { background: #eee; border: 1px solid #ccc; } 

Questo sembra giusto in Firefox, Safari e Opera. Il problema è con Internet Explorer, sia 6 che 7.

Poiché il modulo è il primo della pagina, viene considerato come la forma principale e quindi attivo fin dall’inizio. Il primo pulsante di invio nella forma triggers riceve un bordo nero pieno in IE, per contrassegnarlo come azione principale.

Se spengo i bordi, anche il bordo nero in IE scompare. Sto cercando un modo per mantenere i miei bordi normali, ma rimuovere il contorno.

Bene, questo funziona qui:

         

se non desideri aggiungere un wrapper al pulsante di input /, prova a farlo. Dato che questo è un codice CSS non valido, allora rendilo solo per IE. Avere il bordo come per gli altri browser ma utilizzare il filtro: chroma for IE …

  

ha funzionato per me

So di avere quasi 2 anni di ritardo nel gioco, ma ho trovato un’altra soluzione (almeno per IE7).

Se aggiungi un altro input type="submit" al modulo prima di qualsiasi altro pulsante di invio nel modulo, il problema andrà via. Ora hai solo bisogno di hide questo nuovo pulsante che assorbe i bordi neri.

Funziona per me (l’overflow deve essere “auto”):

  

Nota: sto utilizzando un doctype HTML5 ( ).

Ho trovato una risposta che funziona per me su un altro forum. Rimuove il bordo nero indesiderato in ie6 e ie7. È probabile che alcuni / molti di voi non abbiano posizionato il tuo input = “submit” nei tag form. Non trascurare questo. Ha funzionato per me dopo aver provato tutto il resto.

Se stai utilizzando un pulsante di invio, assicurati che sia all’interno di un modulo e non solo un fieldset:

 

Sono stato in grado di combinare il suggerimento di David Murdoch con alcuni JQuery in modo tale che la correzione venga applicata automaticamente per tutti gli elementi “input: submit” nella pagina:

 // Test for IE7. if ($.browser.msie && parseInt($.browser.version, 10) == 7) { $('') .insertBefore("input:submit"); } 

Puoi includerlo in una Pagina principale o equivalente, in modo che venga applicato a tutte le pagine del tuo sito.

Funziona, ma sembra un po ‘sbagliato, in qualche modo.

Sto costruendo sull’esempio di @ nickmorss sull’uso di filtri che non ha funzionato per la mia situazione … L’uso del filtro glow ha funzionato molto meglio per me.

  

Bene, ecco una brutta soluzione per voi per pesare … Attaccare il pulsante in un , bombardare il bordo del pulsante e dare invece il bordo allo span.

IE è un po ‘incerto sui margini degli elementi del modulo, quindi potrebbe non funzionare in modo preciso. Forse dare lo span sullo stesso sfondo del pulsante potrebbe aiutare in tal senso.

 span.button { background: #eee; border: 1px solid #ccc; } span.button input { background: #eee; border:0; } 

e

  

La soluzione migliore che ho trovato è spostare il bordo su un elemento wrapping, come questo:

 

Con questo CSS:

 .submit_button { width: 150px; border: 1px solid #ccc; } .submit_button .button { width: 150px; border: none; } 

Il problema principale di questa soluzione è che il pulsante ora è un elemento di blocco e deve essere a larghezza fissa. Potremmo usare inline-block, tranne per il fatto che Firefox2 non lo supporta.

Qualunque soluzione migliore è la benvenuta.

Penso filtro: chroma (color = # 000000); come indicato un wile fa è il migliore che puoi applicare in alcune classi. Altrimenti dovrai andare e applicare un tag in più su ogni pulsante che hai se stai usando le lezioni, naturalmente.

.buttonStyle {filter: chroma (color = # 000000); BACKGROUND-COLOR: # E5813C solido; BORDER-BOTTOM: #cccccc 1px solido; BORDER-LEFT: #cccccc 1px solido; BORDER-RIGHT: #cccccc 1px solido; BORDER-TOP: #cccccc 1px solido; Color: # FF9900; FONT-FAMIGLIA: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; PESO FONT: audace; DECORAZIONE DEL TESTO: nessuno; } Che ha fatto per me!

Ho avuto questo problema e l’ho risolto con un div attorno al pulsante, visualizzato come un blocco e posizionato manualmente. i margini per i pulsanti in IE e FF erano semplicemente troppo imprevedibili e non c’era modo per entrambi di essere felici. Il mio pulsante di invio doveva essere perfettamente allineato rispetto all’input, quindi non funzionerebbe senza posizionare gli elementi come blocchi.

Questo funzionerà:

 input[type=button] { filter:chroma(color=#000000); } 

Funziona anche con il tag button e, infine, puoi tranquillamente utilizzare la proprietà css background-image .

Una soluzione di hacking potrebbe essere quella di utilizzare il markup in questo modo:

  

e applica i tuoi stili di bordo all’elemento span.

aggiungi * border: none rimuove il bordo per IE6 e IE7, ma lo mantiene per gli altri browser

Con la tecnica delle porte scorrevoli, utilizzare due spans all’interno del button . Ed elimina qualsiasi formattazione sul button nel tuo override di IE.

  

Non posso commentare (ancora) quindi devo aggiungere il mio commento in questo modo. Il consiglio del signor David Murdoch è il migliore per Opera ( qui ). OMG, che ragazza adorabile che ha avuto.

Ho provato il suo approccio in Opera e sono riuscito sostanzialmente a raddoppiare i tag di input in questo modo:

   

In questo modo il primo elemento è nascosto ma CATCHISCE lo schermo di messa a fuoco che Opera avrebbe dato al secondo elemento di input. LO ADORO!

Almeno in IE7 è ansible ridimensionare il bordo, anche se non è ansible rimuoverlo (impostarlo su nessuno). Quindi, impostando il colore del bordo sullo stesso colore che dovrebbe fare lo sfondo.

 .submitbutton { background-color: #fff; border: #fff dotted 1px; } 

se il tuo sfondo è bianco.

La risposta corretta a questa qustion è:

 outline: none; 

… funziona per IE e Chrome, a mia conoscenza.

Per me il codice qui sotto funzionava davvero.

  

L’ho preso dalla risposta di @Mark's e l’ho caricato solo per IE.