Rimozione del bordo blu nel pulsante di invio <form>

Sto tentando di rimuovere il piccolo bordo blu attorno al pulsante di invio che appare quando viene premuto. Ho provato a risolverlo con border: none; ma questo non lo risolve. Attualmente il mio codice è simile al seguente:Rimozione del bordo blu nel pulsante di invio <form>

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="theme.css" /> 
     <link rel="stylesheet" type="text/css" href="hover.css" /> 
    </head> 
    <body> 
     <form id="button1" action="#" method="post"> 
      <input type="submit" value="ORANGE" 
       class="btn btn-warning"/> 
     </form> 
    </body> 
</html>

Jsfiddle

sto usando XAMPP per eseguirlo su localhost e Google Chrome 42.0.2311.90

UPDATE

.btn:focus { 
     outline: none; 
}

Questo lo ha risolto per me! Non ho intenzione di rendere il mio sito accessibile tramite tastiera, quindi non ho bisogno del contorno blu. È solo per aspetto.

fonte

2015-04-22 Aruloci

Jsfiddle il codice sembra a posto per me. Non c'è un bordo blu. – Cherry

Quale browser hai usato? – Aruloci

Stai parlando dello schema quando fai clic sul pulsante? Ecco come appare il tuo pulsante su Chrome https://www.evernote.com/shard/s136/sh/b17e198f-8c77-4306-9a81-c2a902b139ca/20a74b16b9bc85451e507e459ad95041 – jerrylow

Penso che siete alla ricerca di qualcosa di simile:

<style> 
.btn:focus { 
     outline: none; 
    } 
</style>

Aggiungere gli stili di cui sopra all'interno head tag. Per impostazione predefinita, il bootstrap ha il colore del contorno blu per i pulsanti focalizzati. Puoi rimuoverlo/aggiornarlo usando la classe "btn" come menzionato sopra.

UPDATE

Come @MatthewRapati suggerito: la gente di questa Let contorno sapere che il pulsante è attivo e non deve essere rimosso. È un problema di accessibilità . E 'meglio di restyling, se il default non è voluto

fonte

2015-04-22 18:47:38 Fahad

Questo schema diciamo alle persone che il pulsante ha lo stato attivo e ** non dovrebbe ** essere rimosso. È un problema di accessibilità. È meglio ridisegnarlo se non si desidera il valore predefinito. –

Sì, d'accordo @MatthewRapati ma la domanda è di rimuoverlo: P – Fahad

I contorni vengono utilizzati principalmente per le impostazioni di accessibilità e devono essere mantenuti per il comportamento predefinito, a meno che non vengano forniti alcuni meccanismi o evidenziazione per l'attivazione/messa a fuoco. Se si rimuove semplicemente senza fornire lo stesso e l'utente utilizza la tastiera per navigare, non sarà in grado di sapere quale link/pulsante è attualmente attivo e potrebbe rovinare l'esperienza complessiva della pagina.

Rimuovere il contorno dalla tasto

.btn-warning:focus{ 
    outline:0px; 
}

È inoltre possibile rimuovere contorno da tutti i tasti usando

input[type=button]:focus,input[type=submit]:focus{ 
    outline:0px; 
}

pulsante Default fuoco ha contorno blu 1px su Chrome. Ci sono molti più elementi che hanno contorno, è possibile disabilitare tutti loro con:

*{ 
    outline:0px; 
}

fonte

2015-04-22 18:47:33

Per favore, non farlo mai. –

Perché non dovrei farlo come suggerito? – Aruloci

@Aruloci chiunque usi una tastiera per navigare nel tuo sito non saprà quale elemento ha il focus. Non sapranno dove sono. –

Rimuovere il "contorno" dal pulsante al clic (un: focus)

.btn:focus { 
    outline: none; 
}

fonte

2015-04-22 18:48:15 chrisbedoya

Demo: http://jsfiddle.net/baqunkn1/

.btn-warning { 
    color: #ffffff; 
    background-color: #ff851b; 
    border-color: #ff7701; 
    border: none; 
    outline:none; 
}

fonte

2015-04-22 18:51:13 Shelly

Rimozione del bordo blu nel pulsante di invio <form>

risposta

Problemi correlati