Entfernen der blauen Umrandung in <form> Senden Schaltfläche

Ich versuche, den kleinen blauen Rand um meine Schaltfläche zu entfernen, die angezeigt wird, wenn es gedrückt wird. Ich habe versucht, es mit border: none; zu beheben, aber das hat es nicht behoben. Derzeit mein Code sieht wie folgt aus:Entfernen der blauen Umrandung in <form> Senden Schaltfläche

<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

ich XAMPP bin mit es auf localhost und Google Chrome laufen 42.0.2311.90

UPDATE

.btn:focus { 
     outline: none; 
}

Das hat es für mich repariert! Ich habe nicht vor, meine Website über die Tastatur zugänglich zu machen, also brauche ich nicht die blaue Kontur. Es ist nur für Aussehen.

Quelle

2015-04-22 Aruloci

Jsfiddle Code sieht gut aus für mich. Es gibt keinen blauen Rand. – Cherry

Welchen Browser haben Sie benutzt? – Aruloci

Sprechen Sie über den Umriss, wenn Sie auf den Knopf klicken? So sieht Ihre Schaltfläche in Chrome aus https://www.evernote.com/shard/s136/sh/b17e198f-8c77-4306-9a81-c2a902b139ca/20a74b16b9bc85451e507e459ad95041 – jerrylow

Ich glaube, Sie suchen so etwas wie:

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

die oben Stile innerhalb head-Tag hinzufügen. Bootstrap hat standardmäßig die Umrissfarbe blau für fokussierte Schaltflächen. Sie können es wie oben erwähnt mit der Klasse "btn" entfernen/aktualisieren.

UPDATE

Als @MatthewRapati vorgeschlagen: Diese Leute Umriss wissen lassen, dass die Schaltfläche den Fokus hat und sollte nicht entfernt werden. Es ist eine Zugänglichkeit Sorge. Es ist besser, es zu restyle, wenn der Standard nicht

Quelle

2015-04-22 18:47:38 Fahad

Diese Gliederung lässt Leute wissen, dass die Schaltfläche Fokus hat und ** sollte nicht ** entfernt werden. Es ist ein Zugänglichkeitsanliegen. Es ist besser, es neu zu gestalten, wenn der Standard nicht gewünscht wird. –

Ja, stimmte @ MatthewRapati, aber die Frage ist über das Entfernen: P – Fahad

Gliederung wird hauptsächlich für Eingabehilfeneinstellungen verwendet und sollte für das Standardverhalten beibehalten werden, es sei denn, Sie stellen einen Mechanismus oder eine Hervorhebung für den Fokus/Zugriff bereit. Wenn Sie einfach entfernen, ohne das gleiche zur Verfügung zu stellen, und der Benutzer die Tastatur zum Navigieren verwendet, wird er nicht wissen können, auf welchem Link/Knopf er sich gerade befindet, und kann die Gesamterfahrung mit Ihrer Seite ruinieren.

Entfernen Sie die Kontur von Taste

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

Sie auch Umriss von allen Tasten

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

Standardschaltfläche Fokus hat Umriss 1px Blau auf Chrome entfernen können. Es gibt viele weitere Gegenstände, die Umrisse haben, können Sie alle von ihnen deaktivieren mit:

*{ 
    outline:0px; 
}

Quelle

2015-04-22 18:47:33

Bitte tun Sie dies nie wirklich. –

Warum sollte ich es nicht wie vorgeschlagen tun? – Aruloci

@Aruloci Jeder, der eine Tastatur verwendet, um auf Ihrer Website zu navigieren, weiß nicht, welches Element den Fokus hat. Sie werden nicht wissen, wo sie sind. –

Entfernen Sie die "outline" vom Button auf Klick gesucht (a: focus)

.btn:focus { 
    outline: none; 
}

Quelle

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; 
}

Quelle

2015-04-22 18:51:13 Shelly

Entfernen der blauen Umrandung in <form> Senden Schaltfläche

Antwort

Verwandte Themen