Wie entferne ich den unerwünschten Rahmen von Eingabeschaltflächen in CSS?

Unerwünschte Ränder von Eingabeschaltflächen entfernen

Bei der Interaktion mit Websites stoßen Benutzer häufig auf Eingabeschaltflächen, die als interaktive Elemente für die Übermittlung von Daten dienen oder eine Aktion einleiten. Allerdings können diese Schaltflächen gelegentlich einen unschönen Rahmen anzeigen, wenn sie angeklickt oder fokussiert werden.

In CSS ist die Eigenschaft „outline“ für die Erstellung des sichtbaren Rahmens um die Schaltfläche verantwortlich. Standardmäßig erhalten Elemente in einem Webdokument beim Fokussieren eine gepunktete Umrandung. Bei Eingabeschaltflächen kann dieser Umriss besonders ablenkend sein.

Lösung: Umriss entfernen

Um den unerwünschten Rand zu entfernen, können Sie die Leistung des nutzen Sie können die Eigenschaft „outline“ ändern, indem Sie ihren Wert auf „none“ setzen. So geht's:

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

Beispiel

Wenn Sie diese Stile auf Ihre HTML-Eingabeschaltfläche anwenden, wird die Kontur beim Klicken oder Fokussieren entfernt, sodass Sie einen sauberen und nahtlosen Benutzer erhalten Erfahrung:

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

Hinweis für Chrome-Benutzer

In Chrome erfolgt das Entfernen des Umrissrahmens mithilfe der Gliederung: keine; Das Eigentum reicht möglicherweise nicht aus. In solchen Fällen ist eine zusätzliche CSS-Zeile erforderlich:

-webkit-appearance: none;

Beide anwenden die Gliederung: none; und -Webkit-Aussehen: keines; Eigenschaften zu Ihrem CSS hinzufügen, um sicherzustellen, dass der Rahmen nicht in Chrome-Browsern angezeigt wird.

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