Wie entferne ich Umrissränder von Eingabeschaltflächen in Browsern?

Eingabeschaltflächen so gestalten, dass Umrissränder eliminiert werden

Bestimmte Browser zeichnen einen Umrissrahmen um Eingabeschaltflächen herum, was sich auf die Ästhetik und das Benutzererlebnis der Schaltfläche auswirken kann . Dieses Problem tritt auf, wenn die Schaltfläche den Fokus verliert und ein unschöner Rand zurückbleibt. Um diesen Rahmen zu entfernen, kann die Eigenschaft „outline“ verwendet werden.

Im bereitgestellten Codeausschnitt ist das CSS für die Eingabeschaltfläche ohne eine Umrisseigenschaft definiert. Um den Rahmen zu entfernen, fügen Sie die folgende Zeile hinzu:

outline: none;

Hier ist der aktualisierte CSS-Code:

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

Dieser geänderte Stil entfernt den Umrissrahmen aus der Eingabeschaltfläche in Chrome und anderen Browser, die die Eigenschaft „outline“ unterstützen.

Durch die Angabe von „outline: none;“ wird der Browser angewiesen, unabhängig davon jeden Rahmen oder jedes Leuchten um die Schaltfläche zu entfernen sein Fokuszustand. Dies gewährleistet ein sauberes und einheitliches Erscheinungsbild der Schaltfläche während der gesamten Benutzerinteraktion.

Das obige ist der detaillierte Inhalt vonWie entferne ich Umrissränder von Eingabeschaltflächen in Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!