¿Cómo elimino el borde alrededor de un pre-contento enfocado?

96

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

javascript jquery contenteditable Christoffer
fuente

Respuestas:

188

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;
}
Marius
fuente
6
@Christoffer: outlineno funcionará en IE7 o versiones anteriores . En estos navegadores, debe establecer la hideFocuspropiedad del elemento en true, es decir$('#myEl').get().hideFocus = true;
Andy E
13
Para referencia:[contenteditable]:focus { outline: 0px solid transparent; }
Alf Eaton
Gracias a todos. Salvó el día. Para su información, solo veo el esquema en Chrome. Firefox e IE11 no lo muestran.
nevf
3
También puede usar simplementeoutline: none
Yves M.
Alf, tu comentario debe marcarse como la respuesta:>
foreyez
14

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.

morkro
fuente
¿Cuál es la diferencia entre esto y .element:focus?
JJJ
1
Solo se aplica a los selectores que son satisfechos.
morkro
4
¿Algún beneficio al usar eso [contenteditable]:focus?
Joel
también: pseudo selector habilitado
Walle Cyril