Jak usunąć obramowanie wokół skoncentrowanej treści, którą można edytować przed?

Question 1

Kiedy ustawię element pre na contentededable i ustawiam na nim fokus do edycji, otrzymuje on kropkowaną ramkę wokół niego, która nie wygląda zbyt ładnie. Granicy nie ma, gdy fokus znajduje się gdzie indziej.
Jak usunąć tę granicę?

Dzięki

Question 2

Ustaw outlinewłaściwość na 0px solid transparent;. Konieczne może być również ustawienie tego :focusstanu, na przykład:

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

Question 3

Możesz również dodać :read-writepseudoklasę do stylizowanych elementów, które są edytowalne.

Na przykład ( jsFiddle ) :

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

Przeczytaj więcej o dorszach tutaj .

:read-writeSelektor pseudo-klasa jest obsługiwana w Chrome, Safari i Opera 14+, a na iOS. Jest obsługiwany z -moz-prefiksem w przeglądarce Firefox w formularzu :-moz-read-write. :read-writeSelektor nie jest obsługiwana w programie Internet Explorer i na Androida.

Answer 1

Kiedy ustawię element pre na contentededable i ustawiam na nim fokus do edycji, otrzymuje on kropkowaną ramkę wokół niego, która nie wygląda zbyt ładnie. Granicy nie ma, gdy fokus znajduje się gdzie indziej.
Jak usunąć tę granicę?

Dzięki

Answer 2

190

Ustaw outlinewłaściwość na 0px solid transparent;. Konieczne może być również ustawienie tego :focusstanu, na przykład:

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

Marius
źródło

6

@Christoffer: outlinenie będzie działać w IE7 lub starszym . W tych przeglądarkach musisz ustawić hideFocuswłaściwość elementu na true, np.$('#myEl').get().hideFocus = true;

Andy E

13

Dla porównania:[contenteditable]:focus { outline: 0px solid transparent; }

Alf Eaton,

Dziękuje wszystkim. Uratowałem dzień. FYI, widzę tylko zarys w Chrome. Firefox i IE11 tego nie pokazują.

nevf

4

Możesz też po prostu użyćoutline: none

Yves M.

Alf, Twój komentarz powinien być oznaczony jako odpowiedź:>

foreyez

Answer 3

6