html的outline: none;
outline: none;
是一条 CSS 样式规则,用来取消元素获得焦点时的默认轮廓线(outline)。
🔍 什么是 outline?
outline
是浏览器在某些元素(例如输入框 <input>
、按钮 <button>
、可编辑元素如 <div contenteditable="true">
)获得焦点时,自动加上的一圈虚线或实线边框,目的是:
提示用户当前正在操作哪个元素;
帮助键盘用户(例如用 Tab 键导航的用户)识别焦点在哪。
🧪 示例:
默认效果:
<input type="text" placeholder="点我看看">
浏览器点击后会自动显示一圈蓝色或黑色边框(outline)。
加上 outline: none:
<input type="text" placeholder="点我看看" style="outline: none;">
→ 点击时不再出现那圈焦点边框。
⚠️ 注意事项:
虽然 outline: none;
可以让页面视觉更“干净”,但不建议无必要就移除,因为:
影响无障碍性(accessibility);
会让使用键盘或屏幕阅读器的用户不知道焦点在哪;
推荐使用
outline: none;
的同时,用其他样式替代视觉提示。
更合理写法 ✅:
input:focus {outline: none;box-shadow: 0 0 0 2px #4CAF50;
}
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>input:focus {outline: none;box-shadow: 0 0 0 2px #4CAF50;}</style>
</head>
<body>
<input type="text" placeholder="点我看看"></body>
</html>