Comment puis-je supprimer la frontière autour d'un pré contenteditable ciblé?

Question

Quand je mets un élément avant de contentEditable et mettre l'accent là pour l'édition, il reçoit une bordure en pointillés autour d'elle qui ne semble pas très agréable. La frontière est pas là lorsque le focus est ailleurs.
Comment puis-je supprimer cette frontière?

Merci

Answer 1

Régler la propriété outline 0px solid transparent;. Vous pourriez avoir à mettre sur l'état :focus ainsi, par exemple:

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

Answer 2

Vous pouvez également ajouter la pseudo-classe :read-write aux éléments de style qui sont modifiables.

Par exemple ( jsFiddle ) :

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

En savoir plus ici codrops.

  

Le sélecteur pseudo-classe :read-write est pris en charge dans Chrome, Safari et Opera 14+, et sur iOS.   Il est pris en charge par le préfixe -moz- dans Firefox sous la forme :-moz-read-write.   Le sélecteur de :read-write est pas pris en charge dans Internet Explorer et sur Android.