เราสามารถลบพฤติกรรมเริ่มต้นของไฮเปอร์ลิงก์ซึ่งแสดงเส้นขอบประ (dotted outline) รอบตัวเองเมื่อ active หรือ focused โดยการประกาศคุณสมบัติ CSS outline บนลิงก์ active/focused ให้เป็น none
วิธีแก้ไข
a, a:active, a:focus { outline: none; }
ตัวอย่าง
ลองดูวิธีลบเส้นประรอบลิงก์ที่ active ด้วยตัวอย่าง:
<!DOCTYPE html> <html> <head> <title>Remove dotted line around links using css</title> </head> <style> div { color: #000; padding:20px; background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%); text-align: center; } a, a:active, a:focus { outline: none; } </style> <body> <div> <h1>HTML Links Demo</h1> <a href="https://google.com" target="_blank">Go To Google</a> </div> </body> </html>
ผลลัพธ์
ผลลัพธ์สำหรับโค้ดข้างต้น:
ก่อนใช้วิธีแก้ไข:
หลังใช้วิธีแก้ไข:
