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

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.