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
Réponses:
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;
}[contenteditable]:focus { outline: 0px solid transparent; }
outline: none
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.
.element:focus?
[contenteditable]:focus?
outlinene fonctionnera pas dans IE7 ou une version antérieure . Dans ces navigateurs, vous devez définir lahideFocuspropriété de l'élément surtrue, c'est$('#myEl').get().hideFocus = true;