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
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
Odpowiedzi:
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;
}
[contenteditable]:focus { outline: 0px solid transparent; }
outline: none
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.
.element:focus?
[contenteditable]:focus ?
outlinenie będzie działać w IE7 lub starszym . W tych przeglądarkach musisz ustawićhideFocuswłaściwość elementu natrue, np.$('#myEl').get().hideFocus = true;