Come si rimuove il bordo attorno a un pre modificabile contenuto mirato?


96

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:


188

Imposta la outlineproprietà su 0px solid transparent;. Potrebbe essere necessario impostarlo anche sullo :focusstato, ad esempio:

[contenteditable]:focus {
    outline: 0px solid transparent;
}

6
@Christoffer: outlinenon funzionerà in IE7 o inferiore. In questi browser, è necessario impostare la hideFocusproprietà dell'elemento su true, ad esempio$('#myEl').get().hideFocus = true;
Andy E

13
Per riferimento:[contenteditable]:focus { outline: 0px solid transparent; }
Alf Eaton

Ringrazia tutti. Hai salvato la giornata. Cordiali saluti, vedo solo il contorno su Chrome. Firefox e IE11 non lo mostrano.
nef

3
Puoi anche usare semplicementeoutline: none
Yves M.

Alf, il tuo commento dovrebbe essere contrassegnato come risposta:>
foreyez

14

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.


Qual è la differenza tra questo e .element:focus?
JJJ

1
Si applica solo ai selettori che sono contenteditable.
morkro

4
Qualche vantaggio nell'usarlo [contenteditable]:focus?
Joel

anche: pseudo selettore abilitato
Walle Cyril
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.