Wie man den Rahmen für editierbare Inhalte entfernt

Lernen Sie, wie Sie Rahmen aus editierbaren elementen entfernen.

Entfernen Sie den Rahmen für editierbare Inhalte

Standardmäßig, wenn Sie in contenteditable gesetzt auf true Wenn Sie Inhalte in einem element schreiben, das inhaltlich editierbar ist, erhält dieses element einen Rahmen, wenn es fokussiert wird.

Sie können jedoch CSS verwenden, um den Rahmen zu entfernen:

Schritt 1 - Fügen Sie HTML hinzu:

<p contenteditable="true">Dies ist ein editierbarer Absatz.</p>

Schritt 2 - Fügen Sie CSS hinzu:

Verwenden Sie [Attribute] Der Selector wählt alle elemente aus, die inhaltlich editierbar sind, und verwendet outline Entfernen Sie den Rahmen der Eigenschaft:

[contenteditable] {
  outline: 0px solid transparent;
}

Selbst ausprobieren

Verwandte Seiten

Referenzhandbuch:HTML contenteditable attribute

Referenzhandbuch:CSS [Attribute选择器