it-swarm.com.de

So entfernen Sie den Umrandungsrand von der Eingabeschaltfläche

wenn der Klick an einer anderen Stelle verschwindet, verschwindet der Rand, und es hat nichts gebracht.

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">

68

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>
110
Ankit Agrawal

Fokuskonturen in Chrome und FF

enter image description hereenter image description here

entfernt:

enter image description here

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

Demo

P.S:

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

Es funktioniert einfach für mich :)

*:focus {
    outline: 0 !important;
}
28
X-Coder

Die outline-Eigenschaft ist das, was Sie brauchen. Es ist die Abkürzung für das Festlegen der folgenden Eigenschaften in einer einzelnen Deklaration:

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

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

button {
    outline-style: none;
}
11
henrywright

Dieser hat für mich gearbeitet

button:focus {
    border: none;
    outline: none;
}
10
mnis.p

Es ist sehr einfach, als Sie denken. Wenn die Schaltfläche fokussiert ist, wenden Sie die Eigenschaft outline wie folgt an:

button:focus {
    outline: 0 !important;
}

Aber wenn ich den Wert none verwende, funktioniert das bei mir nicht.

1
Gourav

In Anbetracht der folgenden HTML: 

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

Gehen Sie im CSS-Stil folgendermaßen vor:

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

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

1
Mwizak
button:focus{outline:none !important;}

füge !important hinzu, wenn es in Bootstrap verwendet wird

1
user11173874

Das Entfernen der Kontur ist ein Alptraum für die Zugänglichkeit. Leute, die über 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 Umrisse entfernen MÜSSEN, dann isolieren Sie einen bestimmten Klassennamen.

.no-outline {
  outline: none;
}

Dann können Sie diese Klasse jederzeit anwenden.

1
martinedwards

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

Da es sich bei Ihrem Anliegen um ein ästhetisches Problem handelt, sollten Sie wissen, dass Sie die Farbe, den Stil und die Breite der Kontur ändern können, um sie besser in Ihr Website-Styling einzufügen.

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

Stenografie:

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