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

96

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

Спасибо

Christoffer
источник

Ответы:

188

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

[contenteditable]:focus {
    outline: 0px solid transparent;
}
Мариус
источник
6
@Christoffer: outlineне будет работать в IE7 или ниже. В этих браузерах вам необходимо установить для hideFocusсвойства элемента значение true, то есть$('#myEl').get().hideFocus = true;
Энди Э,
13
Для справки:[contenteditable]:focus { outline: 0px solid transparent; }
Alf Eaton
Спасибо всем. Спас день. К вашему сведению, я вижу только схему в Chrome. Firefox и IE11 этого не показывают.
nevf 06
3
Вы также можете просто использоватьoutline: none
Yves M.
Альф, твой комментарий должен быть помечен как ответ:>
foreyez
14

Вы также можете добавить :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
1
Это применимо только к селекторам, которые содержат контент.
morkro
4
Есть ли польза от этого [contenteditable]:focus?
Joel
также: включен псевдоселектор
Walle Cyril