如何移除select下拉选择框的所有内边距？解决多浏览器兼容问题

嘿，我明白你遇到的麻烦了——浏览器自带的默认样式总是会给select元素偷偷加上内边距，光调margin肯定没用！别担心，我们可以通过重置默认样式来彻底解决这个跨浏览器的问题。

核心解决方案 #

问题的根源是浏览器对select有预设的外观样式和内边距，所以我们需要先移除这些默认样式，再手动控制内边距：

select {
  /* 移除浏览器自带的select外观，这是关键！ */
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  
  /* 移除所有内边距 */
  padding: 0;
  
  /* 同时重置外边距，避免额外间距 */
  margin: 0;
  
  /* 如果不需要默认边框，也可以去掉 */
  /* border: none; */
}

为什么这能生效？ #

• appearance: none会去掉Chrome、Firefox、Edge/IE等浏览器给select添加的默认下拉箭头和内置内边距，让我们能完全掌控元素的样式。
• 直接设置padding: 0就能彻底清除所有内边距，不会再有浏览器偷偷加的额外空间。

补充：保留下拉箭头（可选） #

如果移除默认外观后你还需要下拉箭头，可以通过背景图片自定义，比如：

select {
  /* 上面的重置样式不变 */
  background: url('你的箭头图标路径') no-repeat right center;
  padding-right: 20px; /* 给箭头留出空间 */
}

这样设置后，你的select框就会在所有主流浏览器中都没有额外内边距啦！

内容的提问来源于stack exchange，提问作者Gabriel Torres Villalán