Как убрать границу вокруг сфокусированного довольного пре?

Question

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

Спасибо

Answer 1

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

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

Answer 2

Вы также можете добавить псевдокласс :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.