为什么搜索的输入框focus的时候outline是黄色的

[cyhwinner]

为什么搜索的输入框focus的时候outline是黄色的，可是我本地默认的是蓝色的，我也搜索了全局也没发现哪里有变动了outline

[BUPTlhuanyu]

您好，这是chrome默认的边框聚焦时候的outline，可以在reset.scss找那个加入如下代码进行自定义：
input:focus{outline:#CBE1EF solid thin;}

[cyhwinner]

可是我搜索你的所有文件没发现有把outline设置成别的颜色的,只要发现的node_modules这个文件夹里面有几个包是有修改的

[BUPTlhuanyu]

黄色高亮是chrome默认的给的

[cyhwinner]

不是的吧 我自己写个全新的 outline是蓝色的

…

------------------ 原始邮件 ------------------ 发件人: "BUPTlhuanyu"<[email protected]>; 发送时间: 2019年5月25日(星期六) 下午5:43 收件人: "BUPTlhuanyu/react-music-lhy"<[email protected]>; 抄送: "硬撑i"<[email protected]>; "Author"<[email protected]>; 主题: Re: [BUPTlhuanyu/react-music-lhy] 为什么搜索的输入框focus的时候outline是黄色的 (#4) 黄色高亮是chrome默认的给的 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[BUPTlhuanyu]

这个，我再查查原因吧。可能是其他什么库重新设置了。

[BUPTlhuanyu]

不好意思，最近忙着毕业，今天找了一下原因，你可以先在你本地跑起项目，然后在chrome调试面板找到你的输入框的节点，右键改变输入框的状态，选择force-state，然后选择：focus ，可以看到你的输入框input就处于聚焦状态，并且能看到输入框的高亮的颜色。在style面板找到：focus的颜色样式为：

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

这个样式是浏览器的默认样式即user agent stylesheet。

chrome下的-webkit-focus-ring-color这个颜色就是金色： rgba(229, 151, 0, 255)
但是mac会覆盖的chrome的这个默认颜色：呈现为蓝色#7DADD9.

具体的可以参看：https://stackoverflow.com/questions/7538771/what-is-webkit-focus-ring-color

[cyhwinner]

但是按照mac电脑覆盖来说 我在查询页focus的时候应该还是蓝色的啊

[BUPTlhuanyu]

能否贴一下你的图，看看你搜索框元素focus时候的样式，或者邮件我 [email protected]

[BUPTlhuanyu]

chrome浏览器下，outline不同的调试模式会有不同的默认样式，手机模式下为金色，pc为蓝色。

[cyhwinner]

多谢