Como faço para remover a borda em torno de um conteúdo pré-editável em foco?

Quando eu defino um pré-elemento como contenteditable e coloco o foco nele para edição, ele recebe uma borda pontilhada ao redor que não parece muito boa. A fronteira não está lá quando o foco está em outro lugar.
Como faço para remover essa borda?

obrigado

javascript jquery contenteditable

— Christoffer
fonte

Respostas:

188

Defina a outlinepropriedade como 0px solid transparent;. Você pode ter que defini-lo no :focusestado também, por exemplo:

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

— Marius
fonte

@Christoffer: outlinenão funcionará no IE7 ou inferior. Nestes navegadores, você precisa definir a hideFocuspropriedade do elemento a true, ou seja,$('#myEl').get().hideFocus = true;

— Andy E

Para referência:[contenteditable]:focus { outline: 0px solid transparent; }

— Alf Eaton

Obrigado a todos. Salvei o dia. Para sua informação, estou apenas vendo o esboço no Chrome. Firefox e IE11 não mostram isso.

— nevf

Você também pode simplesmente usaroutline: none

— Yves M.

Alf, seu comentário deve ser marcado como a resposta:>

— foreyez

Você também pode adicionar a :read-writepseudoclasse aos elementos de estilo que são editáveis.

Por exemplo ( jsFiddle ) :

.element:read-write:focus {
     outline: none;
}