Comment supprimer la bordure autour d'un pré-contenu modifiable ciblé?

96

Lorsque je définis un élément pré sur contenteditable et que je mets le focus dessus pour l'édition, il reçoit une bordure en pointillé autour de lui qui n'a pas l'air très agréable. La frontière n'est pas là quand le focus est ailleurs.
Comment supprimer cette bordure?

Merci

javascript jquery contenteditable Christoffer
la source

Réponses:

188

Définissez la outlinepropriété sur 0px solid transparent;. Vous devrez peut-être également le définir sur l' :focusétat, par exemple:

[contenteditable]:focus {
    outline: 0px solid transparent;
}
Marius
la source
6
@Christoffer: outlinene fonctionnera pas dans IE7 ou une version antérieure . Dans ces navigateurs, vous devez définir la hideFocuspropriété de l'élément sur true, c'est$('#myEl').get().hideFocus = true;
Andy E
13
Pour référence:[contenteditable]:focus { outline: 0px solid transparent; }
Alf Eaton
Merci a tous. A sauvé la journée. Pour info, je ne vois que le contour sur Chrome. Firefox et IE11 ne le montrent pas.
nevf
3
Vous pouvez aussi simplement utiliseroutline: none
Yves M.
Alf, votre commentaire doit être marqué comme réponse:>
foreyez
14

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

Par exemple ( jsFiddle ) :

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

En savoir plus ici sur les codrops .

Le :read-writesélecteur de pseudo-classe est pris en charge dans Chrome, Safari et Opera 14+, et sur iOS. Il est pris en charge avec le -moz-préfixe dans Firefox dans le formulaire :-moz-read-write. Le :read-writesélecteur n'est pas pris en charge dans Internet Explorer et sur Android.

morkro
la source
Quelle est la différence entre ceci et .element:focus?
JJJ
1
Cela ne s'applique qu'aux sélecteurs qui peuvent être contentés.
morkro
4
Un avantage en utilisant ça [contenteditable]:focus?
Joel
aussi: pseudo sélecteur activé
Walle Cyril