Di bawah ini kita akan mempelajari cara menghapus border dari elemen yang dapat diedit.
<!DOCTYPE html> <html> <head> <style> [contenteditable] { outline: 0px solid transparent; } </style> </head> <body> <h2>Remove Contenteditable Border</h2> <p contenteditable="true">Ini adalah paragraf yang bisa diedit. Biasanya saya memiliki border fokus di sekeliling saya, tetapi tidak hari ini!</p> </body> </html>
Hapus Border Konten yang Dapat Diedit
Secara default, saat akan menulis di dalam sebuah elemen yang contenteditable disetel ke true, elemen tersebut akan ada border yang berada di sekitar fokus. Namun, kita dapat menggunakan CSS untuk menghapus bordernya:
Langkah 1) Tambahkan HTML:
Contoh
<p contenteditable="true">Ini adalah paragraf yang bisa diedit.</p>
Langkah 2) Tambahkan CSS:
Gunakan selektor[attribute]untuk memilih semua elemen yang dapat diedit kontennya dan hapus border dengan properti outline :
Contoh
[contenteditable] {
outline: 0px solid transparent;
}