How To

Cara Menghapus Border Dari Elemen Yang Dapat Diedit

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 >

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 >

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;
}

Hanifah Nurbaeti

Share
Tags: CSSHow To