Quando imposto un elemento pre su contenteditable e lo metto a fuoco per la modifica, riceve un bordo punteggiato attorno ad esso che non sembra molto carino. Il confine non c'è quando il focus è altrove.
Come rimuovo quel bordo?
Grazie
Quando imposto un elemento pre su contenteditable e lo metto a fuoco per la modifica, riceve un bordo punteggiato attorno ad esso che non sembra molto carino. Il confine non c'è quando il focus è altrove.
Come rimuovo quel bordo?
Grazie
Risposte:
Imposta la outline
proprietà su 0px solid transparent;
. Potrebbe essere necessario impostarlo anche sullo :focus
stato, ad esempio:
[contenteditable]:focus {
outline: 0px solid transparent;
}
[contenteditable]:focus { outline: 0px solid transparent; }
outline: none
Puoi anche aggiungere il file :read-write
pseudo-classe agli elementi di stile modificabili.
Ad esempio ( jsFiddle ) :
.element:read-write:focus {
outline: none;
}
Leggi di più qui su merluzzi .
Il
:read-write
selettore di pseudo-classe è supportato in Chrome, Safari e Opera 14+ e su iOS. È supportato con il-moz-
prefisso in Firefox nel modulo:-moz-read-write
. Il:read-write
selettore non è supportato in Internet Explorer e su Android.
.element:focus
?
[contenteditable]:focus
?
outline
non funzionerà in IE7 o inferiore. In questi browser, è necessario impostare lahideFocus
proprietà dell'elemento sutrue
, ad esempio$('#myEl').get().hideFocus = true;