Wie entferne ich die Grenze um ein contenteditable pre fokussiert?

Question

Wenn ich in ein pre-Element zu contenteditable und Put-Fokus gesetzt für die Bearbeitung, erhält er eine punktierte Grenze um ihn herum, die nicht sehr schön aussieht. Die Grenze ist nicht da, wenn der Fokus woanders ist.
Wie entferne ich die Grenze?

Danke

Answer 1

Stellen Sie den outline Eigenschaft 0px solid transparent;. Man könnte es auf dem :focus Zustand zu setzen hat auch, zum Beispiel:

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

Answer 2

Sie können auch die :read-write pseudo-Klasse Stilelemente hinzufügen, die bearbeitet werden können.

Zum Beispiel ( jsFiddle ) :

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

Lesen Sie mehr über hier auf codrops .

  

Das :read-write Pseudo-Klasse-Selektor ist in Chrome, Safari und Opera 14+ und auf iOS unterstützt.   Es ist mit dem -moz- Präfix in Firefox in Form :-moz-read-write unterstützt.   Der :read-write Selektor ist nicht im Internet Explorer und auf Android unterstützt.