Cuando configuro un elemento pre en contenteditable y le pongo foco para editarlo, recibe un borde punteado a su alrededor que no se ve muy bien. El borde no está ahí cuando el enfoque está en otro lugar.
¿Cómo elimino ese borde?
Gracias
Cuando configuro un elemento pre en contenteditable y le pongo foco para editarlo, recibe un borde punteado a su alrededor que no se ve muy bien. El borde no está ahí cuando el enfoque está en otro lugar.
¿Cómo elimino ese borde?
Gracias
Respuestas:
Establezca la outlinepropiedad en 0px solid transparent;. Es posible que también deba configurarlo en el :focusestado, por ejemplo:
[contenteditable]:focus {
outline: 0px solid transparent;
}[contenteditable]:focus { outline: 0px solid transparent; }
outline: none
También puede agregar la :read-writepseudoclase a los elementos de estilo que son editables.
Por ejemplo ( jsFiddle ) :
.element:read-write:focus {
outline: none;
}Lea más aquí sobre bacalao .
El
:read-writeselector de pseudoclase es compatible con Chrome, Safari y Opera 14+, y con iOS. Es compatible con el-moz-prefijo en Firefox en el formulario:-moz-read-write. El:read-writeselector no es compatible con Internet Explorer y Android.
.element:focus?
[contenteditable]:focus?
outlineno funcionará en IE7 o versiones anteriores . En estos navegadores, debe establecer lahideFocuspropiedad del elemento entrue, es decir$('#myEl').get().hideFocus = true;