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

Question 1

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

Спасибо

Question 2

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

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

Question 3

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

Answer 1

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

Спасибо

Answer 2

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

Answer 3

6