Wenn ich ein pre-Element auf contenteditable setze und den Fokus zum Bearbeiten darauf setze, erhält es einen gepunkteten Rand, der nicht sehr schön aussieht. Die Grenze ist nicht da, wenn der Fokus woanders liegt.
Wie entferne ich diesen Rand?
Vielen Dank
Marius
Stellen Sie die ein outline Eigentum zu 0px solid transparent;. Möglicherweise müssen Sie es auf einstellen :focus auch angeben, zum Beispiel:
[contenteditable]:focus {
outline: 0px solid transparent;
}
@Christoffer: outline funktioniert nicht in IE7 oder niedriger. In diesen Browsern müssen Sie die hideFocus Eigenschaft des Elements zu truedh $('#myEl').get().hideFocus = true;
– Andi E
14. Februar 2010 um 12:04 Uhr
Als Referenz: [contenteditable]:focus { outline: 0px solid transparent; }
– Alf Eaton
10. Januar 2014 um 16:31 Uhr
Danke an alle. Den Tag gerettet. FYI Ich sehe nur die Gliederung auf Chrome. Firefox und IE11 zeigen es nicht an.
– neuf
6. Januar 2015 um 5:38 Uhr
Sie können auch einfach verwenden outline: none
– Yves M.
5. Januar 2016 um 17:02 Uhr
Alf, dein Kommentar sollte als Antwort markiert werden :>
– Shai UI
11. Januar 2017 um 21:47 Uhr
Sie können auch hinzufügen :read-write Pseudo-Klasse, um bearbeitbare Elemente zu formatieren.
Zum Beispiel (jsFiddle):
.element:read-write:focus {
outline: none;
}
Weiterlesen hier auf codrops.
Das
:read-writeDer Pseudo-Klassenselektor wird in Chrome, Safari und Opera 14+ sowie unter iOS unterstützt. Es wird mit unterstützt-moz-Präfix in Firefox in der Form:-moz-read-write. Das:read-writeSelektor wird in Internet Explorer und auf Android nicht unterstützt.
Was ist der Unterschied zwischen diesem und .element:focus?
– JJJ
3. Juli 2015 um 17:29 Uhr
Dies gilt nur für Selektoren, die editierbar sind.
– Morkro
3. Juli 2015 um 17:32 Uhr
Jeder Vorteil, der das verwendet [contenteditable]:focus?
– Joel
9. Mai 2016 um 15:26 Uhr
auch: aktivierter Pseudoselektor
– Walle Kyrill
18. Januar 2018 um 18:23 Uhr
