起因

今天修改公司项目的一个BUG，是一个input框在Mac上开启大写以后，后面会出现一个图标，这个图标影响了我们业务里面的一些东西，造成了遮盖。（复现如下）

过程

那就开始改，一开始就猜到可能是类似-webkit伪类的问题，因为一般这种情况像 滚动条样式，input的placeholder样式都是这么改的，因为这个箭头很肯定不是我们自己写的。

百度无果，掘金无果，能查到的案例都是去除一个“密码锁”图标的案例，名字是::-webkit-credentials-auto-fill-button。我也猜到估计解决是类似的方式，但是确实不知道具体名称，查了很多资料也不知道。

查询过程中知道了一个shadow-dom的概念，这里大家可以自行百度。因为项目调试时用的是chrome，调试的时候看不到shadow-dom，所以耽误了一些时间。最后在Mac的Safari上成功看到的shadow-dom。（如下）

看到了-webkit-caps-lock-indicator感觉就八九不离十了，测试了一下修改display属性果然可以显示隐藏。

结果

最后贴上解决后的代码

// 去除在mac上密码框按大写锁定时 出现的大写锁定按钮 以及自动填充的按钮
input::-webkit-caps-lock-indicator,
input::-webkit-credentials-auto-fill-button {
  display: none !important; // 这个没啥用 权重不够 全靠下面的给弄走
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0; // 为了不影响别的shadow-dom的位置
}

因为shadow-dom上写的是行内样式还有important，权重太高了，这边只能采用略微偏门的方式搞掉。
还有很多类似的情况可以参考这种方式去查找对应的地方
成功解决问题