获得焦点时的边框属性outline

最新推荐文章于 2020-12-24 10:22:23 发布
最新推荐文章于 2020-12-24 10:22:23 发布
阅读量2.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： css closure 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jollyjumper/article/details/17714449
本文介绍了一种去除浏览器默认焦点边框的方法，通过设置CSS属性outline:none来消除当元素获得焦点时出现的不期望的边框效果。此技巧适用于闭包中的对话框及其关闭按钮等UI组件。

使用的closure中dialog,绘制一个close button超出右上角的对话框,发现弹出时这个button都带一个灰色的边框,很难看,有时反复操作之后边框会消失,一直以为是closure的问题.后来用firefox看,边框是一个包了对话框和close button的矩形虚边框,所以感觉是focus之后的效果.google了一下html focus border,问题得解:outline:none

见:http://stackoverflow.com/questions/3015523/remove-or-disable-focus-border-of-browser-via-javascript

CSS中的outline属性：设置元素轮廓以增强焦点指示
weixin_41455464的博客
06-24 826
outlineoutline">点击我</button>这段代码会让按钮在获得焦点时显示一条红色的实线轮廓，宽度为 3px。是不是比默认的蓝色虚线更显眼了？outline好了，今天的讲座就到这里啦！我们详细介绍了outline属性的用法、样式选项以及它在无障碍性中的重要性。记住，outline不仅仅是装饰，它还是提升用户体验、确保网站可访问性的关键工具。如果你对outline有任何疑问，或者想了解更多关于 CSS 的知识，欢迎随时提问！下次讲座再见咯！outline属性的详细介绍。
点击dom，出现黑色边框:focus-visible
weixin_44689966的博客
12-01 513
点击dom出现黑色边框
input位置_input表单输入框聚焦动画系列
weixin_39795479的博客
12-01 207
表单动画1html源码css源码inputBox class类用于布局，就是一个input容器，便于观看，我这里设置每一行分为3个列(可根据自己需求设置)。.inputBox { float: left; width: 27.33%; margin: 40px 3%; position: relative; } 然后为input元素设置一些通用样...
AndroidTV开发7实现仿小米电视和各种盒子TV焦点放大缩小效果
u012556114的博客
09-29 3057
AndroidTV中最常见的就是焦点效果，这个实现很简单，在代码设置view.setFocusable(true)，布局中focusable="true"，然后添加view获得焦点时的效果即可。但是本文不讲这些，而是讲解View获取焦点有一个放大缩小效果，当view放大时处于临近的View之上并且不能被遮挡，当view缩小时要恢复原来的大小。 1.先放几张效果图： 2.方案分析，网上的有如下方案： (1):MainUpView: (2):MetroItemFrameLayout(何俊林大神的
TV端Android聚焦focus
七子笑的weBLOG
03-27 526
TV端Android聚焦focus GridView TV 自定义网格视图 Activity展示内容 ListView TV + 自定义文本视图 + WindowManager显示 自定义TextView 自定义ListView WindowManager布局显示 TV端Android聚焦focus GridView TV 自定义网格视图 packag...
textarea 聚焦后边框_实现"输入框"获得焦点时外边框变蓝
weixin_42464967的博客
12-24 3161
背景之前做了一个网页，网页中的所有输入框都被设计为“获得鼠标焦点时外边框不变蓝”。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为“当输入框获得鼠标焦点时，外边框自动变蓝；失去焦点时外边框恢复原样”。浏览器自动会给输入框input、textarea的outline 属性设置一个默认值，效果就是当输入框获得鼠标焦点时外边框会自动带上颜色，失去焦点时外边框颜色消...
IE下target获得焦点时产生虚线问题的解决方法
12-09
`hidefocus` 是一个IE特有的HTML属性，主要用于隐藏元素获得焦点时的默认边框。当这个属性被添加到元素标签上，例如`<a>`、`<input>`等，可以有效地防止元素在获取焦点时显示那条烦人的虚线边框。例如，我们可以这样...
请保留超链接的outline属性
09-25
`outline`属性是浏览器提供的一个辅助功能，它通过在超链接获得焦点时添加一个视觉上的轮廓（默认表现为虚线边框），来标识出用户当前可以交互的元素。这一功能对于那些无法使用鼠标或触摸屏的用户来说是极为关键的...
去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
01-19
1、使用Chrome的都知道，当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框，我以前一直以为这是chrome的特性，没法去掉，原来是css的效果，outline这个属性。 你可以用下面的css代码...
去除input边框
热门推荐
sunrainamazing的博客
05-12 9万+
去除input的边框 去除input获取焦点时的蓝色外边框** 去除input的边框仅仅用border属性 ，其实是不能满足我们的需求的 此外还需要加上outline属性才可以 实现我们想要的样式 ** 去除边框的代码 border-width:0; 即可去除相应的周围的边框 但是实际，并不能达到我们想要的效果， 而appearance:none;也不能达到我们想要的效果。
TvFocusBorder:Android Tv 焦点框框架; 支持设置颜色或图片作为焦点框; 支持圆角变化
05-13
欢迎使用Android TV端焦点框框架 TvFocusBorder 支持焦点移动; 支持颜色或图片作为焦点框; 支持焦点框圆角变化; 效果 Gradle 引入 //support版本 implementation 'com.owen:tv-focusborder:1.1.4' //androidx版本 implementation 'com.owen:tv-focusborder:2.0.1' 使用 /** 颜色焦点框 */ FocusBorder mColorFocusBorder = new FocusBorder.Builder().asColor() //阴影宽度(方法shadowWidth(18f)也可以设置阴影宽度) .shadowWidth(TypedValue.COMPLEX_UNIT_DIP, 20f) //阴影颜色
Android TV 焦点框移动的实现方法
08-27
本篇文章主要介绍了Android TV 焦点框移动的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
去除input:focus状态下边框的方法
Michael_Li的博客
01-16 5297
首先, 可以在css中添加outline: none, 使边框消失 在使用Bootstrap框架的时候, 添加 box-shadow: none, 否则仍有边框
基于Redis的分布式锁实现
weixin_33883178的博客
04-25 818
前言 本篇文章主要介绍基于Redis的分布式锁实现到底是怎么一回事，其中参考了许多大佬写的文章，算是对分布式锁做一个总结 分布式锁概览 在多线程的环境下，为了保证一个代码块在同一时间只能由一个线程访问，Java中我们一般可以使用synchronized语法和ReetrantLock去保证，这实际上是本地锁的方式。但是现在公司都是流行分布式架构，在分布式环境下，如何保证不同节点的线程同步执行呢？ 实...
关于input标签:focus更改样式的问题
阿猫搬砖丶
01-11 4万+
input标签的border和outline 总觉得是一个自己踩了很多次的坑 若希望实现input在触发焦点时更改样式，通常会想到使用:focus选择器，但当使用border去更改样式时，会发现失效了: input[type=text]:focus{ border: 1px solid #AFECAB; } 这里是希望改成浅绿色边框，发现不起作用，也无关层级，因为加了!important也没有...
CSS: outline
weixin_30883271的博客
07-03 880
outline用法和border类似， 例如： .outline {　　outline: 1px solid #000;} 两者表现也类似， 都是给元素的外面画框，但是，作用却不一样。 1. outline是一个和用户体验密切相关的属性，与focus状态和键盘访问关系密切。 在访问网页的时候，如果鼠标坏了，这时候我们一般会用tab键来按次序不断focus控件元素，包括：链接、按钮、输入框...
html、css 实现网页弹出层
Zhangguohao666的博客
12-05 1万+
只使用html、css，一步步教你实现网页弹出登录窗口
outline属性
最新发布
06-12
根据引用[1]和[4]，outline属性用于为元素绘制轮廓（外边框），它不占据空间（与border不同，border会影响布局），通常用于突出显示元素（比如表单输入框获得焦点时）。引用[1]指出：在CSS3中，outline的语法格式为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值