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

96

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

Christoffer
sumber

Jawaban:

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
14

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.

morkro
sumber
Apa perbedaan antara ini dan .element:focus?
JJJ
1
Ini hanya berlaku untuk penyeleksi yang kontennya dapat diedit.
morkro
4
Ada keuntungan menggunakan itu [contenteditable]:focus?
Yoel
juga: selektor semu diaktifkan
Walle Cyril