`contenteditable` অ্যাট্রিবিউটযুক্ত এলিমেন্ট ফোকাস পেলে ব্রাউজার ডিফল্ট আউটলাইন দেখায়। `outline: none` দিয়ে এটি সরানো যায়।
উদাহরণ: কন্টেন্টএডিটেবল বর্ডার সরানো
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
p{ font-size: 40px; }
[contenteditable] { outline: 0px solid transparent; }
</style>
</head>
<body>
<h1>কন্টেন্টএডিটেবল বর্ডার সরানোর উদাহরণ</h1>
<p contenteditable="true">এটি একটি কন্টেন্টএডিটেবল প্যারাগ্রাফ যা আপনি সম্পাদনা করতে পারেন</p>
</body>
</html>
কোড ব্যাখ্যা
- [contenteditable] এট্রিবিউট সিলেক্টর: সব `contenteditable="true"` এলিমেন্ট সিলেক্ট করে।
- outline: 0px solid transparent: আউটলাইন volledig অদৃশ্য করে। `outline: none`ও কাজ করবে।
অ্যাকসেসিবিলিটি সতর্কতা
আউটলাইন সরালে কীবোর্ড নেভিগেশন ব্যবহারকারীরা ফোকাসড এলিমেন্ট দেখতে পাবেন না। বিকল্প হিসেবে `outline: 2px solid transparent` এবং `:focus-visible` ব্যবহার করুন।
