So entfernen Sie den Umrissrand von der Eingabetaste

Wenn Sie auf eine andere Stelle klicken, verschwindet der Rand. Versuchen Sie, keine zu fokussieren, aber es hat nicht geholfen. Wie kann der hässliche Knopfrand beim Klicken verschwinden?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

mit Gliederung: keine; Wir können diesen Rand in Chrom entfernen

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Fokuskonturen in Chrome und FF

entfernt:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

Demo

Zugänglichkeit (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Es funktioniert bei mir einfach :)

*:focus {
    outline: 0 !important;
}

Dieser hat für mich gearbeitet

button:focus {
    border: none;
    outline: none;
}

Die outlineEigenschaft ist, was Sie brauchen. Es ist eine Abkürzung für das Festlegen jeder der folgenden Eigenschaften in einer einzelnen Deklaration:

• outline-style
• outline-width
• outline-color

Sie könnten verwenden outline: none;, was in der akzeptierten Antwort vorgeschlagen wird. Sie könnten auch genauer sein, wenn Sie möchten:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

Hinzufügen, !importantwenn es in Bootstrap verwendet wird

Um das Problem zu vermeiden, das beim Ändern der Gliederungseigenschaft für einen Fokus verursacht wird, wird ein visueller Effekt erzielt, wenn der Benutzer auf die Eingabetaste tippt oder darauf klickt.

In diesem Fall handelt es sich um einen Übermittlungstyp, Sie können ihn jedoch auch auf eine Schaltfläche type = "" anwenden.

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Es ist sehr einfach als Sie denken. Wenn die Schaltfläche fokussiert ist, wenden Sie die outlineEigenschaft folgendermaßen an:

button:focus {
    outline: 0 !important;
}

Aber wenn ich noneWert benutze , funktioniert es bei mir nicht.

Das Entfernen von nessorry-zugänglichen Ereignissen ist bei Standard-Webentwicklungen keine gute Idee. So oder so, wenn Sie nach einer Lösung suchen, bei der nur die Gliederung entfernt wird, wird das Problem nicht gelöst. Sie müssen auch den blauen Farbschatten entfernen. Verwenden Sie für bestimmte Szenarien einen separaten Klassennamen, um diesen speziellen Stil für Ihre Schaltfläche zu isolieren.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Mach das besser

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Stellen Sie sowohl die outlineals auch die box-shadowEigenschaften der Schaltfläche auf ein noneund machen Sie sie wichtig .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

Der Grund für das Festlegen der Werte auf " Wichtig" ist, dass bei Verwendung anderer CSS-Bibliotheken oder Frameworks wie "Bootstrap" diese möglicherweise überschrieben werden.

Das Entfernen der Kontur ist ein Albtraum für Barrierefreiheit. Leute, die mit Tastaturen tippen, werden nie wissen, auf welchem ​​Gegenstand sie sich befinden.

Am besten lassen Sie es, da die meisten angeklickten Schaltflächen Sie sowieso irgendwohin bringen, oder wenn Sie die Gliederung entfernen MÜSSEN, isolieren Sie sie mit einem bestimmten Klassennamen.

.no-outline {
  outline: none;
}

Dann können Sie diese Klasse jederzeit anwenden.

Angesichts des HTML unten:

<button class="btn-without-border"> Submit </button>

Gehen Sie im CSS-Stil wie folgt vor:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Dieser Code entfernt den Schaltflächenrand und deaktiviert den Fokus des Schaltflächenrahmens, wenn auf die Schaltfläche geklickt wird.

Wie viele andere bereits erwähnt haben, selector:focus {outline: none;}wird dieser Rand entfernt, aber dieser Rand ist eine wichtige Eingabehilfenfunktion, mit der Tastaturbenutzer die Schaltfläche finden können und die nicht entfernt werden sollte.

Da Ihr Anliegen ästhetisch zu sein scheint, sollten Sie wissen, dass Sie die Farbe, den Stil und die Breite des Umrisses ändern können, damit er besser in das Design Ihrer Website passt.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Kurzschrift:

selector:focus {
  outline: 1px dashed red;
}