请知悉:本文最近一次更新为 10年 前,文中内容可能已经过时。

做前端的时候发现,自己的文本框在Safari浏览器上focus的时候,不会执行默认的focus的颜色,而是自动绘制上了蓝色发光的阴影。这个测试半天,最后对比其他网站的css,发现原来是自己学艺不精,少写了一个css属性导致的问题。

具体去除办法如下:
在对应的input或者textarea的CSS中写入:

outline: none; 

即可。

方法来自:https://stackoverflow.com/questions/935559/remove-safari-Chrome-textinput-textarea-glow

其中CSS中outline的属性说明如下:

定义和用法

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性:

  • outline-color
  • outline-style
  • outline-width

如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

默认值:invert none medium
继承性:no
版本:CSS2
JavaScript 语法:object.style.outline=”#0000FF dotted thin”

浏览器支持

所有浏览器都支持 outline 属性。
注释:如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。

CSS说明转自:https://www.w3school.com.cn/cssref/pr_outline.asp


如您从本文得到了有价值的信息或帮助,请考虑扫描文末二维码捐赠和鼓励。

尊重他人劳动成果。转载请务必附上原文链接,我将感激不尽。


与《Safari浏览器input/textarea控件focus时蓝色阴影如何去除》相关的博文:


4
留言

avatar
😀
😀😁😂😅😭🤭😋😘🤔😰😱🤪💪👍👎🤝🌹👌
janmi的围脖
janmi的围脖
【🚶访客】

不生效,它并不是outline引起的,我的重置样式已经做了outline:none处理。

janmi的围脖
janmi的围脖
【🚶访客】

Safari浏览器input:radio控件focus时的蓝色线怎么去除?