当前位置: 首页 > 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.lryc.cn/news/584177.html

相关文章:

  • AI进化论06:连接主义的复兴——神经网络的“蛰伏”与“萌动”
  • 【性能测试】jmeter+Linux环境部署和分布式压测,一篇打通...
  • 【科研绘图系列】R语言绘制相关系数图
  • idea安装maven 拉取依赖失败的解决办法
  • AI问答之手机相机专业拍照模式的主要几个参数解释
  • 《PyQt6-3D:开启Python 3D开发新世界》
  • XSS(ctfshow)
  • cpu利用率,系统吞吐量,周转时间,等待时间,响应时间详解(操作系统)
  • 二进制安全-汇编语言-06-包含多个段的程序
  • QBoost 2025版:加速手机性能,提升使用体验
  • pytorch深度学习-Lenet-Minist
  • 从零开始搭建深度学习大厦系列-2.卷积神经网络基础(5-9)
  • 基于 Flutter 的开源文本 TTS 朗读器(支持 Windows/macOS/Android)
  • 从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
  • Flink Exactly Once 和 幂等
  • Spring for Apache Pulsar->Reactive Support->Message Consumption
  • wpf使用webview2显示网页内容(最低兼容.net framework4.5.2)
  • 以太网基础⑤UDP 协议原理与 FPGA 实现
  • 西电考研录取:哪些省份考研上岸西电更容易?
  • websocket的客户端(发送接收json的消息)
  • TCP-与-UDP-协议详解:原理、区别与应用场景全解析
  • 自动驾驶环境感知:天气数据采集与融合技术实战
  • 关键字前跟空格或首字母, 关键字后跟空格或标点符号; 标点符号后面不是必须跟空格;
  • Duplicate cleaner pro 的使用技巧
  • 汽车加气站操作工分类有几种
  • 制作一款打飞机游戏78:游戏选项
  • 城市脉搏中的隐形守护者
  • 羊肚菌自动采收车设计cad【7张】+三维图+设计说明书
  • U-Boot 2025.07 引入的 “uthreads” 优势介绍
  • 【三维重建】开源slam数据集介绍