เราสามารถลบพฤติกรรมเริ่มต้นของไฮเปอร์ลิงก์ซึ่งจะแสดงโครงร่างจุดรอบ ๆ ตัวเมื่อใช้งานหรือโฟกัสโดยการประกาศคุณสมบัติโครงร่าง CSS บนลิงก์ที่ใช้งาน/โฟกัสเป็นไม่มี
วิธีแก้ปัญหา
a, a:active, a:focus {
outline: none;
} ตัวอย่าง
มาดูวิธีการลบเส้นประรอบ ๆ ลิงค์ที่ใช้งานพร้อมตัวอย่าง -
<!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> ผลลัพธ์
ต่อไปนี้เป็นผลลัพธ์สำหรับโค้ดด้านบน -
ก่อนใช้สารละลาย
หลังจากใช้สารละลาย
