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
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
Antworten:
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;
}[contenteditable]:focus { outline: 0px solid transparent; }
outline: none
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.
.element:focus?
[contenteditable]:focus?
outlinefunktioniert nicht in IE7 oder niedriger. In diesen Browsern müssen Sie diehideFocusEigenschaft des Elements auf setzentrue, dh$('#myEl').get().hideFocus = true;