Как мне удалить границу вокруг сфокусированной контентной pre?

Когда я устанавливаю для элемента pre значение contenteditable и помещаю в него фокус для редактирования, вокруг него появляется пунктирная рамка, которая выглядит не очень красиво. Границы нет, когда фокус находится где-то еще.
Как мне удалить эту границу?

Спасибо

javascript jquery contenteditable

— Christoffer
источник

Ответы:

188

Установите для outlineсвойства значение 0px solid transparent;. Возможно, вам также придется установить его в :focusсостоянии, например:

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

— Мариус
источник

@Christoffer: outlineне будет работать в IE7 или ниже. В этих браузерах вам необходимо установить для hideFocusсвойства элемента значение true, то есть$('#myEl').get().hideFocus = true;

— Энди Э,

Для справки:[contenteditable]:focus { outline: 0px solid transparent; }

— Alf Eaton

Спасибо всем. Спас день. К вашему сведению, я вижу только схему в Chrome. Firefox и IE11 этого не показывают.

— nevf 06

Вы также можете просто использоватьoutline: none

— Yves M.

Альф, твой комментарий должен быть помечен как ответ:>

— foreyez

Вы также можете добавить :read-writeпсевдокласс к редактируемым элементам стиля.

Например ( jsFiddle ) :

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

Подробнее читайте здесь о codrops .

:read-writeСелектор псевдо-класс поддерживается в Chrome, Safari и Opera 14+, так и на IOS. Он поддерживается с -moz-префиксом в Firefox в форме :-moz-read-write. :read-writeСелектор не поддерживается в Internet Explorer и на Android.

— Моркро
источник

В чем разница между этим и .element:focus?

— JJJ

Это применимо только к селекторам, которые содержат контент.

— morkro

Есть ли польза от этого [contenteditable]:focus?

— Joel

также: включен псевдоселектор

— Walle Cyril