不要给a设置outline:none
outline属性有什么作用
原文链接 a{outline:none} do not do it
当用户使用tab键进行链接切换时,该属性会在当前选中的链接(获得焦点)使用该属性,一般来说是虚线框
的长方形。这对于没有使用鼠标输入的用户而言尤其有用,它可以作为视觉反馈来告知用户当前的输入。所以说
如果设置outline属性为none,则对这些人来说将会是很差的用户体验。
给链接元素设置获得焦点属性是非常有必要的,对任何使用键盘来操作用户界面的模式,焦点指示器需可见。
为什么有些开发者喜欢删除该属性
主要是由于涉及的虚荣心,或者是完全忘记了上述提到的这一点。
开发者常用的css reset往往将outline属性删除,Eric Meyers的css reset也是如此。但是Eric也说了,开发者
需要额外定义焦点样式。
/* remember to define focus styles! */ :focus {outline: 0; }
我们要记住注释的部分,一定要重新定义“焦点样式”。
如果要删除该属性,需要设置替换属性
尽量不要删除outline属性,但是也有一些其他方法来设置键盘获取焦点链接样式:
- 设置背景颜色。如:#test1 a:focus { background: #FFFF00; }
- 设置字体样式。 如: #test2 a:focus { color: #FF6600; }
- 设置outline属性。 如:#test3 a:focus { outline: #FF0000 dotted medium; }
- 设置高亮属性。 如:#test4 a:focus { color: #FFFFFF; background: #FF0000; }
转载于:https://www.cnblogs.com/accordion/p/4248056.html
不要给a设置outline:none相关推荐
- Outline,Input样式的设置,小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
- outline属性的设置和作用简述
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 注释:轮廓线不会占据空间,也不一定是矩形. outline 简写属性在一个声明中设置所有的轮廓属性. 简单 ...
- Android Studio 一些方便使用的设置
相信非常多使用Eclipse的朋友,開始用Android Studio都是认为不是特别方便, a:比方怎样使鼠标放到方法上面,就有提示用法; b:怎样设置字体大小,和背景色; c:还有怎么查看Outl ...
- outline的使用
在CSS中,outline属性表示内容边框周围的轮廓线,用来突出元素.轮廓线不占位置,也不是固定的形状.outline属性是一个简写属性,可以按顺序这样设置属性: outline-color 规定 ...
- css outline
关于CSS中的outline-style outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.outline 属性设置元素周围的轮廓线. 要始终在 outlin ...
- html边框凹陷样式设置,你不知道的CSS(边框塌陷)?
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 在html和CSS的学习中,你可能会做很多精美的网页,但其中一些不常见的问题,或许初次遇到的你会很是棘手,下面就一些例子我做一些简单分析. 图片加上链接后 ...
- CSS:outline的用法,用outline实现镂空效果
1.outline的用法 outline用法和border类似, 如下: .outline {outline: 1px solid #000; } 两者表现也类似, 都是给元素的外面画框,但是,作用却 ...
- css去掉a标签点击后的虚线框
outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...
- html圆点虚线,html的a标签点击后出现虚线框问题
html的a标签点击后出现虚线框问题 a标签点击后出现虚线框情况,一般出现在通过遨游.火狐或者ie的几个版本看到.而safari.opera.goole浏览器等本身就不支持这个效果,所以看不到这个虚线 ...
最新文章
- Ajax操作的四个步骤
- mysql 左连接 怎么走索引_数据库索引、左连接、右连接、等值连接
- 20145228 《信息安全系统设计基础》第0周学习总结
- 前端学习(3261):js高级教程(4)相关问题
- 配置VLAN以及配置VTP;
- 之前写的 JSX 的条件语句竟然存在那么多 Bug?
- Fiddler 快速模拟 mock
- Adaboost\GBDT\GBRT\组合算法
- 1)⑤爬取搜狗旅游部分新闻
- sd卡 格式化 命令 linux,在Linux命令行上格式化SD卡、USB驱动器、闪存驱动器的方法...
- 2022.6.14日新selenium写法
- 清除U盘内所占的隐藏空间(U盘容量突然变小了)
- 为什么说每个软件工程师,都该懂大数据技术?
- 微端服务器没有4个文件,微端服务器不传送数据库
- ORB_SLAM2、ORB_SLAM3跑EuRocKITTI数据集及evo评估
- 应用安全系列之二十三:SSRF
- 【U8】禁止UU(UTU)随登陆账套启动(U8V11.0及其以上版本)
- 奇迹服务器如何修改合成几率,奇迹萌新教程系列-奇迹单双手武器互换修改教程...
- ABAP CA CO CS等操作符
- Unity显示印度语异常
热门文章
- 信息安全工程师笔记-RSA密码
- Qt学习笔记-Qt中OpenGL的使用
- might和could的区别用法_might 与 could区别,谢谢,may和might的区别及用法
- html柳树动画,3D教程-柳树生长动画
- java tcp 仿真工具_MODBUS-TCP Client Tester(免费从站仿真工具)V1.01 最新版
- php如何强制下载文件,php 强制下载文件实例代码
- js年会抽奖_嘿!这真的是一个正经的抽奖程序!
- OPTEE之安全存储详解
- 计组之中央处理器:2、指令周期数据流(指令周期、机器周期、时钟周期、取指周期、间址周期、执行周期、中断周期、单指令周期、多指令周期、流水线方案)
- [Python]网络爬虫(六):一个简单的百度贴吧的小爬虫