去除input在chrome中显示的外边框
原因
中间部分的input框,在聚焦时候,会显示一个黑色的外边框,查找后发现原因是chrome中给input框的focus-visible增加了outline属性
解决方案
为input框的focus-visible设置outlone:none; 属性
如果要增加鼠标聚焦后显示边框的效果,可以设置 outline: 1px solid red; 相当于基于整个元素节点设置外边框。
因此针对设置了圆角一类的元素节点,想要设置边框,最好还是采用:
border: 1px solid #96c9f7;
或者
box-shadow: 0px 0px 0px 1px #96c9f7;