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 outlineproprietà su 0px solid transparent;. Potrebbe essere necessario impostarlo anche sullo :focusstato, 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-writeselettore 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-writeselettore non è supportato in Internet Explorer e su Android.
.element:focus?
[contenteditable]:focus?
outlinenon funzionerà in IE7 o inferiore. In questi browser, è necessario impostare lahideFocusproprietà dell'elemento sutrue, ad esempio$('#myEl').get().hideFocus = true;