当前位置: 首页 > news >正文

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>

http://www.dtcms.com/a/272943.html

相关文章:

  • C++STL-deque
  • 1. COLA-DDD的实战
  • 【基础架构】——软件系统复杂度的来源(低成本、安全、规模)
  • 告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
  • IDEA运行Spring项目报错:java: 警告: 源发行版 17 需要目标发行版 17,java: 无效的目标发行版: 17
  • Cargo.toml 配置详解
  • 【科研绘图系列】R语言探索生物多样性与地理分布的可视化之旅
  • 网安-解决pikachu-rce乱码问题
  • 访问Windows服务器备份SQL SERVER数据库
  • (C++)任务管理系统(文件存储)(正式版)(迭代器)(list列表基础教程)(STL基础知识)
  • x86交叉编译ros 工程给jetson nano运行
  • Rust and the Linux Kernel
  • Sophix、Tinker 和 Robust 三大主流 Android 热修复框架的详细对比
  • windows10 安装docker到H盘
  • Linux 服务器挖矿病毒深度处理与防护指南
  • 使用Docker将Python项目部署到云端的完整指南
  • Web 会话认证方案详解:原理、流程与安全实践
  • Variables
  • 分库分表之实战-sharding-JDBC分库分表执行流程原理剖析
  • ubantu问题手册
  • 大数据学习5:网站访问日志分析
  • 力扣hot100速通(7.9)|49.字母异位词分组 128.最长连续序列 283.移动零 11.盛最多水的容器 42.接雨水
  • 观成科技:基于自监督学习技术的恶意加密流量检测方案
  • CRMEB Pro版前端环境配置指南
  • AT9850B北斗双频导航定位芯片简介
  • 基于大数据的电力系统故障诊断技术研究
  • 华为鸿蒙HarmonyOpenEye项目:开眼App的鸿蒙实现之旅
  • SSRF(ctfshow)
  • 【第三章-基础】Python 字典
  • 3D Surface Reconstruction with Enhanced High-Frequency Details