Bagaimana cara menghapus batas di sekeliling konten yang dapat diedit sebelumnya?

Question 1

Ketika saya menetapkan elemen pra ke konten yang dapat diedit dan fokus di dalamnya untuk pengeditan, itu menerima batas putus-putus di sekitarnya yang tidak terlihat sangat bagus. Perbatasan tidak ada saat fokus berada di tempat lain.
Bagaimana cara menghapus perbatasan itu?

Terima kasih

Question 2

Setel outlineproperti ke 0px solid transparent;. Anda mungkin harus mengaturnya juga di :focusnegara bagian, misalnya:

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

Question 3

Anda juga dapat menambahkan :read-writepseudo-class ke elemen gaya yang dapat diedit.

Misalnya ( jsFiddle ) :

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

Baca lebih lanjut di sini tentang codrop .

The :read-writepemilih pseudo-class didukung di Chrome, Safari, dan Opera 14 +, dan di iOS. Ini didukung dengan -moz-prefiks di Firefox dalam bentuk :-moz-read-write. The :read-writepemilih tidak didukung di Internet Explorer dan Android.

Answer 1

Ketika saya menetapkan elemen pra ke konten yang dapat diedit dan fokus di dalamnya untuk pengeditan, itu menerima batas putus-putus di sekitarnya yang tidak terlihat sangat bagus. Perbatasan tidak ada saat fokus berada di tempat lain.
Bagaimana cara menghapus perbatasan itu?

Terima kasih

Answer 2

188

Setel outlineproperti ke 0px solid transparent;. Anda mungkin harus mengaturnya juga di :focusnegara bagian, misalnya:

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

Marius
sumber

6

@Christoffer: outlinetidak akan berfungsi di IE7 atau lebih rendah. Di browser ini, Anda perlu menyetel hideFocusproperti elemen ke true, yaitu$('#myEl').get().hideFocus = true;

Andy E

13

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

Alf Eaton

Terima kasih semuanya. Menyelamatkan hari itu. FYI Saya hanya melihat garis besar di Chrome. Firefox dan IE11 tidak menampilkannya.

nevf

3

Anda juga dapat menggunakanoutline: none

Yves M.

Alf, komentar Anda harus ditandai sebagai jawaban:>

foreyez

Answer 3

6