Frage Wie entferne ich den Rahmen um einen fokussierten zufriedenen Vorzug?


Wenn ich ein Pre-Element auf contenteditable setze und den Fokus darauf lege, um es zu bearbeiten, erhält es eine gepunktete Umrandung, die nicht sehr gut aussieht. Die Grenze ist nicht da, wenn der Fokus irgendwo anders ist.
Wie entferne ich diesen Rahmen?

Vielen Dank


75
2018-02-14 10:47


Ursprung


Antworten:


Stellen Sie das ein outline Eigentum zu 0px solid transparent;. Möglicherweise müssen Sie es auf dem festlegen :focus zum Beispiel auch:

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

136
2018-02-14 10:49



Sie können auch die hinzufügen :read-write Pseudo-Klasse, um Elemente zu bearbeiten, die bearbeitet werden können.

Zum Beispiel (jsFiddle):

.element:read-write:focus {
     outline: none;
}

Weiterlesen hier auf codrops.

Das :read-write Pseudo-Klassenselektor wird in Chrome, Safari und Opera 14+ sowie auf iOS unterstützt.   Es wird unterstützt mit der -moz- Präfix in Firefox im Formular :-moz-read-write.   Das :read-write selector wird in Internet Explorer und Android nicht unterstützt.


9
2018-02-04 23:38