Wie entferne ich den Rand um ein fokussiertes inhaltsbearbeitbares Pre?

Wenn ich ein Pre-Element auf contenteditable setze und es zum Bearbeiten fokussiere, erhält es einen gepunkteten Rand, der nicht sehr gut aussieht. Die Grenze ist nicht da, wenn der Fokus woanders liegt.
Wie entferne ich diesen Rand?

Vielen Dank

javascript jquery contenteditable Christoffer
quelle

Antworten:

187

Setzen Sie die outlineEigenschaft auf 0px solid transparent;. Möglicherweise müssen Sie es auch auf den :focusStatus einstellen , zum Beispiel:

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

Marius
quelle

@Christoffer: outlinefunktioniert nicht in IE7 oder niedriger. In diesen Browsern müssen Sie die hideFocusEigenschaft des Elements auf setzen true, dh$('#myEl').get().hideFocus = true;

Andy E

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

Alf Eaton

Vielen Dank an alle. Den Tag gerettet. Zu Ihrer Information, ich sehe nur die Gliederung auf Chrome. Firefox und IE11 zeigen es nicht.

Nevf

Sie können auch einfach verwendenoutline: none

Yves M.

Alf, Ihr Kommentar sollte als Antwort markiert werden:>

foreyez

Sie können die :read-writePseudoklasse auch zu Stilelementen hinzufügen , die bearbeitet werden können.

Zum Beispiel ( jsFiddle ) :

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

Lesen Sie hier mehr über Codrops .

Die :read-writePseudoklassenauswahl wird in Chrome, Safari und Opera 14+ sowie unter iOS unterstützt. Es wird mit dem -moz-Präfix in Firefox im Formular unterstützt :-moz-read-write. Die :read-writeAuswahl wird im Internet Explorer und unter Android nicht unterstützt.

morkro
quelle

Was ist der Unterschied zwischen diesem und .element:focus?

JJJ

Dies gilt nur für Selektoren, die inhaltsbearbeitbar sind.

Morkro

Gibt es einen Vorteil, wenn Sie das nutzen [contenteditable]:focus?

Joel

auch: aktivierter Pseudo-Selektor

Walle Cyril