这问题我之前调试样式时也踩过坑——当你把select的border、outline、background全设为none后，浏览器默认的焦点样式就没了，因为它本来就是基于这些基础样式来渲染焦点状态的。要恢复默认样式，不用自己手写模拟，直接用CSS的关键字就能搞定，分两种场景：

1. 完全恢复默认的焦点状态（包括边框、背景） #

如果你希望焦点时select完全回到浏览器的原始样式，可以用revert关键字，它会把属性重置为浏览器的默认样式（区别于initial，initial是属性的CSS初始值，比如border的初始值就是none，不是浏览器给select的默认边框）：

select {
  background: none;
  outline: none;
  border: none;
}

select:focus {
  background: revert;
  outline: revert;
  border: revert;
}

2. 仅恢复焦点轮廓（保留常态的自定义样式） #

要是你只想让焦点时显示浏览器默认的焦点轮廓，常态下还是保持border、background为none，那只针对outline设置revert就够了：

select {
  background: none;
  outline: none;
  border: none;
}

select:focus {
  outline: revert;
}

补充说明 #

revert关键字在Chrome、Firefox、Safari、Edge等现代浏览器都支持，兼容性足够好。如果要兼容非常老旧的浏览器（比如IE），可以手动模拟默认样式，比如给outline设为auto，border设为1px solid #999这类近似浏览器默认的样式，但现在这种场景已经很少见了。

内容的提问来源于stack exchange，提问作者CommonSenseCode